什么是路由嵌套
嵌套路由是比较常见的,比如在home页面中,我们希望通过/home/news和/home/message访问一些内容,即一个路径映射一个组件,访问这两个路径也分别渲染两个组件。
如何实现路由嵌套
具体步骤为:
1.创建对应的子组件,并且在路由映射中配置对应的子路由
/index.js
const routes = [
{
path: '',
//redirect为重定向,表示将path重定向为/home
redirect: '/home'
},
{
path: '/home',
component: Home,
children: [
{
path: '',
redirect: 'news'
},
{
path: 'news',/* 注意子组件不需要加/ */
component: HomeNews
},
{
path: 'meassage',
component: HomeMessage
}
]
},
]
2.在组件内部使用标签
/Home.vue
<template>
<div>
<h2>我是首页</h2>
<P>我是首页内容</P>
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/meassage">消息</router-link>
<router-view></router-view>
<p>我是首页内容结尾</p>
</div>
</template>