7.vue-router嵌套

1、路由嵌套，如下图

2、在6.vue-router传参项目下“关于”页面里做个嵌套路由。

在views文件平添加about文件夹，并在about文件夹下分别添加两个子组件.
AboutUsView.vue：

<template>
    <h3>关于我们</h3>
</template>

AboutInfoView.vue：

<template>
    <h3>关于详情</h3>
</template>

3、修改index.js路由文件

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // 用重定向让关于界面默认指向us
    redirect: '/about/us',
    component: () => import('../views/AboutView.vue'),
    // 添加子页面
    children: [
      {
        // 二级导航的路径不要添加 /
        path: 'us',
        component: () => import('../views/about/AboutUsView'),
      },
      {
        // 二级导航的路径不要添加 /
        path: 'info',
        component: () => import('../views/about/AboutInfoView'),
      },
    ]
  },
  {
    path: '/news',
    name: 'news',
    // 一般非首页会用这种方式进行引入，这种方式只有要显示时才会加载，相当于加快了网站首页的显示
    component: () => import('../views/NewsView'),
  },
  {
    path: '/newsdetails/:name',
    name: 'newsdetails',
    // 一般非首页会用这种方式进行引入，这种方式只有要显示时才会加载，相当于加快了网站首页的显示
    component: () => import('../views/NewsDetailsView')
  },
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

4、修改AboutView.vue文件：

<template>
  <div class="about">
    <router-link to="/about/us">关于我们</router-link> |
    <router-link to="/about/info">关于信息</router-link>
    <router-view></router-view>
  </div>
</template>

5、查看效果