Vue2通用后台管理系统（3）vue-router

安装

npm i vue-router@3.6.5

在src/router/index.js中写入：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

创建路由组件：

src/views/Home.vue

src/views/User.vue

在src/router/index.js中写入：

import Vue from 'vue'
import VueRouter from 'vue-router'

// 1.创建路由组件
import Home from '../views/Home.vue'
import User from '../views/User.vue'

Vue.use(VueRouter)

// 2.将路由与组件进行映射
const routes = [
    { path: '/home', component: Home },
    { path: '/User', component: User }
]

// 3.创建router实例
const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
  })

export default router;

挂载到根节点上，在main.js中写入以下内容：

 

import router from './router';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在App.vue中写入

 

<template>
    <router-view></router-view>
</template>

运行后效果： 

 

 嵌套路由：

 在src/router/index.js中

const routes = [
    {
        // 主路由
        path: '/',
        component: Main,
        // 子路由
        children: [
            { path: 'home', component: Home },
            { path: 'User', component: User }
        ]
    }
]

 在src/views/Main.vue中

<template>
    <div>
        <h1>Main</h1>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    }
}
</script>

运行后效果：