router基础使用

 1.安装router

npm i vue-router@3

安装后

2.写出路由界面

接着

3.配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "../views/Home.vue"
import About from "../views/About.vue"
Vue.use(VueRouter)const routes = [{ path: '/home', component: Home },{ path: '/about', component: About }
]const router = new VueRouter({routes
})export default router

4.在main.js挂载路由

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

import router from './router';//此处省略index.js，会默认去读取

5.写路由出口

在App.vue中写<router-view></router-view>

6.子路由

const routes = [{ path: '/', component: Main ,children:[{ path: 'home', component: Home },{ path: 'about', component: About }]},]

这里子路由不能是/about这种带斜杠的，会报错

记得在主路由下写路由出口（指App.vue下一个路由出口，主路由下一个路由出口），这样才能显示出子路由

子路由运用，比如后台管理系统，上面导航和左侧导航不变，只变右下的区域，这时候就用子路由

注意！这里是path: '/', 不是path: '/'main, 

前者直接/子路由就可以跳转，后者必须/main/子路由