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

作者：马育民 • • 阅读：10018

需要掌握：

  1. vue教程：路由案例

  2. vue教程：路由案例-重定向

说明

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

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

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

案例

如下图：

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

创建组件

组件 考试管理 和 作业管理，也是由 路由控制是否显示的，所以是 路由组件，那么应该放到 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 的写法，多层级，如下图：

  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 属性的 层级就会很多，写起来麻烦

解决： 命名路由

原文出处：/show_1GW3mbFbUL5g.html

吉ICP备15003043号