java router_vue Router嵌套路由

vue Router嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。

我们搞个实例看看：

菜单1下面再搞两个子菜单；

首先我们在pages下建两个子菜单

SubMenu1.vue

子菜单1内容

export default {

name: 'SubMenu1'

}

SubMenu2.vue

子菜单2内容

export default {

name: 'SubMenu2'

}

router/index.js修改下，menu1里加个children：

children:[

{

path:'/menu1/subMenu1',

component:SubMenu1

},

{

path:'subMenu2',  // 简化写法 类似 /menu1/subMenu2

component:SubMenu2

},

{

path:'',

redirect: '/menu1/subMenu1'

}

]

修改下Menu1.vue:

• 子菜单1

• 子菜单2

export default {

name: 'Menu1'

}

.main{

display:flex;

}

ul li{

padding-left: 20px;

list-style-type: none;

}

ul li a{

text-decoration: none;

}

.content{

padding: 30px;

}