嵌套路由:
eg. 在home页面中,想通过/home/news. /home/message 访问一些内容
一个路径映射一个组件,访问这两个路径也会分别渲染两个组件
路径和组件的关系:
实现步骤:
- 创建对应的子组件,并且在路由映射中配置对应的子路由
- 在组件内部使用 <router-view> 标签
- 在src - components 文件夹下新建两个.vue文件,作为子组件
- Home.vue:
<template>
<div>
<h2>我是组件 home</h2>
<p>。。家是小的国,国是大的家。。</p>
// 注意路径写法 /home/news 。不能省略/home
<router-link to='/home/news'>新闻</router-link>
<router-link to='/home/message'>信息</router-link>
<router-view></router-view>
</div>
</template>
src - router - index.js:
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
...
{
path:'/home',
// component: Home 引用后直接使用
component: () => import('../components/Home'), // 路由懒加载
children: [
{ //默认路由
path: '',
redirect: 'news'
},
{
path: 'news', //不加/, 不能写成 /news
component: HomeNews
},
{
path: 'message',
component: HomeMessage
}
]
}
...