40.Vue3：嵌套路由配置

什么是嵌套路由？

        就是导航中还存在导航（多级导航）

配置前的准备

        在原有的router基础上，src下创建一个文件夹存放两个vue文件，作为子导航

 配置流程

第一步：

在创建路由配置文件中添加子路由的配置：index.js

 {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue'),
    // 对about页面配置其子页面（导航）
    children:[
      {
        // 二级导航路径不加斜杠
        path:'us',
        component:() => import("../views/AboutSub/AboutUS.vue")
      },
      {
        path:'info',
        component:() => import("../views/AboutSub/Aboutinfo.vue")
      }
    ]
  }

第三步：

指定子路由显示位置<touter-view> 与 添加子路由跳转链接：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>

第四步：

选到关于信息时，对二级导航有一个默认值，需要重定向

{
    path: '/about',
    name: 'about',
    // 选到关于信息时，对二级导航有一个默认值，需要重定向
    redirect:'/about/us',
    component: () => import('../views/AboutView.vue'),
    // 对about页面配置其子页面（导航）
    children:[
      {
        // 二级导航路径不加斜杠
        path:'us',
        component:() => import("../views/AboutSub/AboutUS.vue")
      },
      {
        path:'info',
        component:() => import("../views/AboutSub/Aboutinfo.vue")
      }
    ]
  }