在工作中，我们经常遇到需要一种情况，一个页面里面还有多个页面，最常见的就是在后台管理系统中，
一个菜单下面还有子菜单，甚至子菜单下面还有子子菜单，
这时候就要用的vue-router嵌套路由的功能了
比如我们在前面的课程中已经有了首页、列表页和详情页了。
现在我们在首页中，给它添加两个子页面，比如叫推荐内容和最新内容
1）在添加需要添加子页面的父页面页面中，添加<router-view>
<router-view>表示子页面要填充在父页面中的位置，
比如我们现在在index.vue中添加<router-view>
<template>
<div>这里是首页</div>
<router-link to="/list">点击跳转到列表页</router-link>
<button @click="onBtnClick">按钮点击后跳转列表页</button>
<div>下面是子页面的内容</div>
<div>
<router-view></router-view>
</div>
</template>
2）新建页面
推荐页面 recommend.vue
<template>
<h1>这里是推荐内容</h1>
</template>
<script>
export default {}
</script>
<style></style>
最新内容页面
<template>
<h1>这里是最新内容</h1>
</template>
<script>
export default {}
</script>
<style></style>
我们添加两个示例页面，都是最简单的内容
#######3）在router.js中配置
我们是要在首页添加子页面，所以在配置首页route这个对象里面给它增加一个children属性，是一个数组，说明可以接收多个，children数组里面的对象和之前定义的路由对象类似
{
path: '/index', // 修改
component: () => import('./views/index'),
name: 'index',
meta: {
title: '首页',
keepAlive: true,
},
// 增加
children: [
{
path: 'recommend',
name: 'recommend',
component: () => import('./views/recommend'),
},
{
path: 'new',
name: 'new',
component: () => import('./views/new'),
},
],
},
需要注意两点
1.为了更好的理解嵌套路由的效果，我把首页的path修改成了'/index'
2.在children里面的path属性，开头不要写'/'
4）在首页添加几个按钮，方便我们跳转
<div>
<router-link to="/index">不显示子页面的首页</router-link>
<br />
<router-link to="/index/recommend">推荐内容首页</router-link>
<br />
<router-link to="/index/new">最新内容首页</router-link>
</div>
然后我们就可以在页面上点击试试了
可以看到我用红色框起来的部分，我们的url和内容是对应的
在子页面来回跳转的时候，我们首页上半部分的内容，也就是代码里<router-view>之外的内容是不变的
这节课其实关键点就3点
1.在显示子页面的位置加上<router-view>
2.在router.js里面配置子路由时候使用children这个属性
3.url的格式是{父级路由}+'/'+{子级路由}
结束语
到这节课vue-router4快速入门的课就结束了，加上之前vue3快速入门的教程，学会这些内容以后，大家就可以用vue3做一些初、中级项目了。比如初级的项目：企业站、数据展示类的网站，中级的项目：功能比较简单的商城、博客之类。当然需要你有必要的html、js、css基础。
后续我还会写一些进阶教程，大家共同学习。
