提出问题

由 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>

原文出处：/show_1GW3mbXAZjqR.html