vue3.x教程：命名路由-（router-link标签、根据路由名字跳转）-马育民老师

# 提出问题

由 [vue教程：嵌套路由（多级菜单）-（router-link标签、path跳转）](https://www.malaoshi.top/show_1GW3mbFbUL5g.html "vue教程：嵌套路由（多级菜单）-（router-link标签、path跳转）") 可知，当嵌套路由层级过深，` <router-link>` 的 `to` 属性值就会很长。

### 解决

使用 **命名路由**，可以解决上面的问题

# 给路由命名

修改 `src/router/index.js` 文件，给路由加上 `name` 属性，如下：

```
// 引入
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:[
				{
					name: 'exam',//关键：路由名字
					path: 'exam', //关键：二级路由路径，前面不要加 “/”
					component: exam, //组件
				},
				{
					name: 'homework',//关键：路由名字
					path: 'homework', //关键：二级路由路径，前面不要加 “/”
					component: homework, //组件
				}
			]
		},
		{ 
			path: '/teacher', //路径
			component: teacher //组件
		}
	]
})

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

# 修改 Student.vue 文件

通过路由名字跳转，如下：

```
<RouterLink active-class="action" :to="{ name:'exam'}">考试管理</RouterLink>
```

```
<RouterLink active-class="action" :to="{ name:'homework'}">作业管理</RouterLink>
```

**关键部分是：**`:to="{ name:'exam'}"`，写起来要简单些，不需要像 `path`那样，写完整路径

**注意：**

- `:to`，要写上 `:`
- `exam`是路由的 **名字**

**注意：**有时改完后可能不好使，需要重启服务

### 完整代码：

```
<template>
    <div class="app">
        <div>学生信息</div>
        <div>姓名：{{name}}</div>
        <div class="s1">
            <div class="menu">
                <h3>二级菜单</h3>
                <div>
                    <RouterLink active-class="action" :to="{ name:'exam'}">考试管理</RouterLink>
                </div>
                <div>
                    <RouterLink active-class="action" :to="{ name:'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>
```

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