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

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

//App.vue

export default {

name: 'App'

}

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

export default {

name: 'child'

}

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

export default {

name: 'child2'

}

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

}

}

]

},

]

})

标签：vue,name,child,router,path,路由,view

来源： https://blog.csdn.net/KenThomas/article/details/90545928