[vue-router4快速入门] 8.嵌套路由

在工作中，我们经常遇到需要一种情况，一个页面里面还有多个页面，最常见的就是在后台管理系统中，

一个菜单下面还有子菜单，甚至子菜单下面还有子子菜单，
这时候就要用的vue-router嵌套路由的功能了
比如我们在前面的课程中已经有了首页、列表页和详情页了。
现在我们在首页中，给它添加两个子页面，比如叫推荐内容和最新内容

1）在添加需要添加子页面的父页面页面中，添加

表示子页面要填充在父页面中的位置，
比如我们现在在index.vue中添加

2）新建页面

推荐页面 recommend.vue

最新内容页面

我们添加两个示例页面，都是最简单的内容
#######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）在首页添加几个按钮，方便我们跳转

  

    不显示子页面的首页
    

    推荐内容首页
    

    最新内容首页
  

然后我们就可以在页面上点击试试了

可以看到我用红色框起来的部分，我们的url和内容是对应的

在子页面来回跳转的时候，我们首页上半部分的内容，也就是代码里之外的内容是不变的

这节课其实关键点就3点
1.在显示子页面的位置加上
2.在router.js里面配置子路由时候使用children这个属性
3.url的格式是{父级路由}+'/'+{子级路由}

结束语

到这节课vue-router4快速入门的课就结束了，加上之前vue3快速入门的教程，学会这些内容以后，大家就可以用vue3做一些初、中级项目了。比如初级的项目：企业站、数据展示类的网站，中级的项目：功能比较简单的商城、博客之类。当然需要你有必要的html、js、css基础。
后续我还会写一些进阶教程，大家共同学习。