Vue Router 嵌套路由

一、什么是嵌套路由

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

二、嵌套路由的语法

1.嵌套路由的配置语法

在src\router.js文件的路由匹配规则中通过children属性定义子路由匹配规则，语法格式如下：

routes: [{

    path: '父路由路径',

    component: 父组件,

    children: [

      { path: '子路由路径1', component: 子组件1 },

      { path: '子路由路径2', component: 子组件2 }

    ]

}]

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

2.在组件中定义子路由链接的语法

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

三、嵌套路由的代码演示

本代码是在Vue Router的安装与基本使用方法-CSDN博客的基础上进行修改的。

1.创建子路由组件

创建子路由组件src\components\pages\Tab1.vue和src\components\pages\Tab2.vue文件（将他们放在新创建的pages文件夹下，会更有条理一些）。

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

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

2.在About组件中添加子路由链接和子路由视图

<!-- 注释掉原来的About.vue文件 -->
<!-- <template>
  <div class="about-container">
    <h3>About组件</h3>
  </div>
</template> -->

<!-- 以下是嵌套路由的案例 -->
<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;
}

/* 用于定义链接（a元素，同router-link）的样式。 */
.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>

3.在router.js中使用children属性定义子路由匹配规则

// router.js文件内容如下：
import { createRouter, createWebHashHistory } from "vue-router"
// 导入组件
import Home from "./components/Home.vue"
import About from "./components/About.vue"
import Tab1 from "./components/pages/Tab1.vue"
import Tab2 from "./components/pages/Tab2.vue"

// // 创建路由实例对象
// const router = createRouter({
//     history: createWebHashHistory(),
//     // routes数组用于定义路由匹配规则
//     routes: [
//         { path: '/home', component: Home },
//         { path: '/about', component: About },
//     ]
// })
// // 导出路由实例对象
// export default router


//嵌套路由
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/home', component: Home },
        {
            path: '/about',
            component: About,
            children: [
                { path: 'tab1', component: Tab1 },
                { path: 'tab2', component: Tab2 },
            ]
        }
    ]
})
// 导出路由实例对象
export default router

4.浏览器可视化

在浏览器中访问http://localhost:5173/#/about/，页面显示About组件；单击“tab1”链接，页面显示About组件中的Tab1组件；单击“tab2”链接，页面显示About组件中的Tab2组件，如下图所示。

附本节项目代码下载地址：

链接：https://pan.baidu.com/s/13d-dUoSaSk7nZ9iUoNobQw?pwd=8888
提取码：8888