vue3.x教程：嵌套路由（多级菜单）-（router-link标签、根据path跳转）-马育民老师

需要掌握：

1. [vue教程：路由案例](https://www.malaoshi.top/show_1GW3mL39vLtB.html "vue教程：路由案例")

2. [vue教程：路由案例-重定向](https://www.malaoshi.top/show_1GW3maviTXt8.html "vue教程：路由案例-重定向")

# 说明

嵌套路由，简单理解就是 **一级菜单** 下面有 **二级菜单**

如：https://element.eleme.cn/#/zh-CN/component/installation

一级路由 “组件” 中，还有 二级路由

[![](/upload/0/0/1IX45AI3nC8C.png)](/upload/0/0/1IX45AI3nC8C.png)

# 案例

如下图：

[![](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-02-09_23-12-08.png)](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-02-09_23-12-08.png)

点击 **二级菜单** 的 `考试管理` 和 `作业管理` ，可以切换组件

# 创建组件

组件 `考试管理` 和 `作业管理`，也是由 **路由控制是否显示的**，所以是 **路由组件**，那么应该放到 `pages` 目录下

### 实现 考试管理组件

在 `views` 目录下，创建 `Exam.vue` 文件，内容如下：

```
<template>
    <div>
        <h1>考试管理</h1>
        <div>数学：90</div>
        <div>语文：80</div>
        <div>英语：85</div>
    </div>
</template>
```

### 实现 作业管理组件

在 `views` 目录下，创建 `Homework.vue` 文件，内容如下：

```
<template>
    <div>
        <h1>作业管理</h1>
        <ul>
            <li>2022-01-01作业</li>
            <li>2022-01-02作业</li>
            <li>2022-01-03作业</li>
        </ul>
    </div>
</template>
```

# 修改路由文件

修改 `src/router/index.js` 路由文件：

1. 引入组件
2. 在一级路由 `student`，配置二级路由：`exam` 和 `homework`
**注意：**二级路由的 `path` 前面不要加上 `/`，否则不好使

### 增加代码

导入组件：

```
import exam from '@/views/Exam.vue'
import homework from '@/views/Homework.vue'
```

增加嵌套路由：

```
children:[
	{
		path: 'exam', //关键：二级路由路径，前面不要加 “/”
		component: exam, //组件
	},
	{
		path: 'homework', //关键：二级路由路径，前面不要加 “/”
		component: homework, //组件
	}
]
```

### 完整代码

```
// 引入
import {createRouter, createWebHashHistory} from 'vue-router'
//引入组件
import student from '@/views/Student.vue'
import teacher from '@/views/Teacher.vue'
import exam from '@/views/Exam.vue'
import homework from '@/views/Homework.vue'

// 创建路由器，需要传入 {} 对象
// (一个工程只需要创建一个路由器对象)
const router = createRouter({
	history: createWebHashHistory(), // 路由器的工作模式
	routes : [ // 注意：是 routes，不是router，其value是数组，数组里面的元素是 {} 对象
		{
			path: '/',
			redirect:'/student'
		},
		{ 
			path: '/student', //路径，相当于<a>标签的href，关键：必须以 “/” 开头
			component: student, //组件
			children:[
				{
					path: 'exam', //关键：二级路由路径，前面不要加 “/”
					component: exam, //组件
				},
				{
					path: 'homework', //关键：二级路由路径，前面不要加 “/”
					component: homework, //组件
				}
			]
		},
		{ 
			path: '/teacher', //路径
			component: teacher //组件
		}
	]
})

// 暴露路由，让其他页面可以使用
export default router
```

# 修改 学生组件

修改 `Student.vue` 文件：

1. 增加导航菜单，即：添加 `router-link` 标签
**注意：** `to` 属性通过 `path` **路径** 实现跳转，类似 url 的写法，**多层级**，如下图：
[![](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-02-11_07-26-58.png)](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-02-11_07-26-58.png)

2. 设置组件显示位置，即：添加 `router-view` 标签

### 关键代码

导入：

```
import {RouterLink,RouterView} from 'vue-router'
```

HTML：
```
<div class="s1">
	<div class="menu">
		<h3>二级菜单</h3>
		<div>
			<RouterLink active-class="action" to="/student/exam">考试管理</RouterLink>
		</div>
		<div>
			<RouterLink active-class="action" to="/student/homework">作业管理</RouterLink>
		</div>
	</div>
	<RouterView class="content"></RouterView>
</div>
```

CSS样式：

```
<style scoped>
.app{
    border: 1px red solid;
}
.action{
  color: red;
}
a{
  color: blue;
}
.s1{
    width: 500px;
    height:200px;
    margin:0 auto;
    /* border: 1px red solid; */
}
.menu{
    float: left;
}
.content{
    float:left;
    margin-left: 100px;
}
</style>
```

### 完整代码

```
<template>
    <div class="app">
        <div>学生信息</div>
        <div>姓名：{{name}}</div>
        <div class="s1">
            <div class="menu">
                <h3>二级菜单</h3>
                <div>
                    <RouterLink active-class="action" to="/student/exam">考试管理</RouterLink>
                </div>
                <div>
                    <RouterLink active-class="action" to="/student/homework">作业管理</RouterLink>
                </div>
            </div>
            <RouterView class="content"></RouterView>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import {RouterLink,RouterView} from 'vue-router'
const name = ref('李雷')
</script>
<style scoped>
.app{
    border: 1px red solid;
}
.action{
  color: red;
}
a{
  color: blue;
}
.s1{
    width: 500px;
    height:200px;
    margin:0 auto;
    /* border: 1px red solid; */
}
.menu{
    float: left;
}
.content{
    float:left;
    margin-left: 100px;
}
</style>
```

### 缺点

当 嵌套路由太多，`to` 属性的 层级就会很多，写起来麻烦

**解决：** 命名路由

原文出处：http://www.malaoshi.top/show_1GW3mbFbUL5g.html