vue-router，子路由，和同级多个子路由

首先App.vue有一个最顶层的router-view

//App.vue <template> <keep-alive> <router-view/> </keep-alive> </template> <script> export default { name: 'App' } </script> <style> </style>

router/index.js文件配置的意思是，当浏览器路径为/，App.vue里的router-view显示HelloWorld组件

//router/index.js const router = new Router({ routes: [ { path: '/', name: 'HelloWorld', component:HelloWorld } ] })

子路由，child.vue有一个子路由router-view，再创建两个组件a.vue和b.vue

//child.vue <template> <div class="child"> <router-link to="/a"></router-link> <router-link to="/b"></router-link> <router-view/> </div> </template> <script> export default { name: 'child' } </script> <style> </style>

router/index.js文件配置的意思是， 当浏览器路径为/a，child.vue里的子路由router-view显示a组件 当浏览器路径为/b，child.vue里的子路由router-view显示b组件 默认显示a组件

//router/index.js const router = new Router({ routes: [ { path: '/', name: 'HelloWorld', component:HelloWorld }, { path: '/a',//路径配置和第一个children一样，表示子路由默认显示a.vue name: 'a', component: child, //path: '/child', //redirect:'/a',//或者也可以重定向到/a children:[ { path:'/a', name: 'a', component: a }, { path:'/b', name: 'b', component: b } ] }, ] })

同级多个子路由，child2.vue有3个子路由router-view，再创建三个组件child_a.vue，child_b.vue，child_c.vue

//child2.vue <template> <div class="child2"> <router-link to="/child_a"></router-link> <router-link to="/child_b"></router-link> <router-view/> <router-view/ name="b"> <router-view/ name="c"> </div> </template> <script> export default { name: 'child2' } </script> <style> </style>

router/index.js文件配置的意思是， 当路径为/child_a时，默认router-view显示child_a，name为b的router-view显示child_b，name为c的router-view显示child_c 当路径为/child_b时，默认router-view显示child_c，name为b的router-view显示child_b，name为c的router-view显示child_a 默认路径为/child_a

//router/index.js const router = new Router({ routes: [ { path: '/', name: 'HelloWorld', component:HelloWorld }, { path: '/a', name: 'a', ...//同上，省略 }, { path: '/child_a', //路径配置和第一个children一样，表示默认路径为/child_a name: 'child_a', component: child2, //path: '/child2', //redirect:'/child_a', //或者也可以重定向到/child_a children:[ //此处要配置在children里也是因为3个路由都为child2里的子路由 { path: '/child_a', //当路径为/child_a时 components: { //这里注意是components，加s default: child_a, //默认router-view显示child_a b: child_b, //name为b的router-view显示child_b c: child_c //name为c的router-view显示child_c } }, { path: '/child_b',//当路径为/child_b时 components: { default: child_c, //默认router-view显示child_c b: child_b, //name为b的router-view显示child_b c: child_a //name为c的router-view显示child_a } } ] }, ] })