- 子路由配置：
- 在父级路由中添加children属性，值为子路由配置
- 当想让某个子路由作为默认项时，path的值为空字符即可，并且在父组件中
to属性中中需要填写父路由路径 - 子路由有可能会嵌套很多层，这样会导致
router-link的地址会很长，那样使用{name:'xxx'}就可以简化子路由地址- 注意：一旦设置了子路由，那么父路由就不要设置name属性，而是将父路由的name属性放到默认子路由中
xxx.vue 子路由嵌套位置（父组件）
<template>
<div>
关于我
<hr>
<ul class="nav">
<router-link to="/about" exact tag="li">
<a>study</a>
</router-link>
<router-link to="/about/silder" tag="li">
<a>silder</a>
</router-link>
<router-link :to="{name:'work'}" tag="li">
<a>work</a>
</router-link>
</ul>
<router-view></router-view>
</div>
</template>
index.js 路由配置文件
export default new Router({
mode: 'history',
linkActiveClass: 'is-active',
routes: [
{
path: '/about',
component: about,
children: [
{
path: '', //默认子路由
name: 'about',
component: study
},
{
path: 'silder',
name: 'silder'
component: silder
},
{
path: 'work',
name: 'work'
component: work
}
]
}
]
})
- 简化浏览器访问子文件路径
image.png
简化为 -->
image.png
index.js 路由配置文件
export default new Router({
mode: 'history',
linkActiveClass: 'is-active',
routes: [
{
path: '/about',
component: about,
children: [
{
path: '', //默认子路由
name: 'about',
component: study
},
{
path: '/silder', //只需要在子路由的路径上添加根目录即可
name: 'silder'
component: silder
},
{
path: '/work',
name: 'work'
component: work
}
]
}
]
})
