什么是嵌套路由？

嵌套路由是指通过路由实现组件的嵌套展示，它主要由页面结构决定。实际项目中的应用界面通常由多层嵌套的组件组合而成，为了使多层嵌套的组件能够通过路由访问，路由也需要具有嵌套关系，也就是在路由里面嵌套它的子路由。

演示嵌套路由的简单配置

在src\router.js文件的路由匹配规则中通过children属性定义子路由匹配规则。

routes: [
  {
    path: '父路由路径', 
    component: 父组件,
    children: [
      { path: '子路由路径1', component: 子组件1 },
      { path: '子路由路径2', component: 子组件2 }
    ]
  }
]

在组件中定义子路由链接的语法格式如下。

<router-link to="/父路由路径/子路由路径"></router-link>

注意：

当使用children属性定义子路由匹配规则时，子路由的path属性前不要带“/”，否则会永远以根路径开始请求。

演示嵌套路由的实现

在src\components目录下创建pages目录，用于存放子路由组件。

创建src\components\pages\Tab1.vue文件。

<template>
  <div>Tab1组件</div>
</template>
<style scoped>
div {
  text-align: left;
  background-color: #9dc4e5;
}
</style>

创建src\components\pages\Tab2.vue文件。

<template>
  <div>Tab2组件</div>
</template>
<style scoped>
div {
  text-align: left;
  background-color: #ffba00;
}
</style>

在component\About.vue文件中添加子路由链接和子路由视图。

<template>
  <div class="about-container">
    <h3>About组件</h3>
    <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>
<style scoped>
.about-container {
  min-height: 150px;
  background-color: #f2f2f2;
  padding: 15px;
}
.about-container a {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 10px;
  color: #000;
  margin: 0 5px;
}
.about-container a.router-link-active {
  color: #000;
  background-color: #deebf6;
}
</style>

修改src\router.js文件，在routes中导入Tab1组件和Tab2组件，并使用children属性定义子路由匹配规则。

routes: [
  { path: '/', redirect: '/about' },
  { path: '/home', component: () => import ('./components/Home.vue') },
  {
    path: '/about', component: () => import('./components/About.vue'),
    children: [
      { path: 'tab1', component: () => import ('./components/pages/Tab1.vue') },
      { path: 'tab2', component: () => import ('./components/pages/Tab2.vue') }]
  }]

在浏览器中访问http://127.0.0.1:5173/。页面打开后，会自动重定向到About组件的路由，页面显示About组件；单击“tab1”链接，页面显示About组件中的Tab1组件；单击“tab2”链接，页面显示About组件中的Tab2组件，如下图所示。

嵌套路由的样式冲突