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

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

需要掌握：

  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 前面不要加上 /，否则不好使

如下：

//引入VueRouter
import VueRouter from 'vue-router'
//引入组件
import student from '../views/Student'
import teacher from '../views/Teacher'
import exam from '../views/Exam'
import homework from '../views/Homework'

//创建路由，并暴露
export default new VueRouter({
    routes : [
        {
            path: '/',redirect:'/student'
        },
        { 
            path: '/student', //一级路径
            component: student, //组件
            children:[
                {
                    path: 'exam', //关键：二级路由路径，前面不要加 “/”
                    component: exam, //组件
                },
                {
                    path: 'homework', //关键：二级路由路径，前面不要加 “/”
                    component: homework, //组件
                }
            ]
        },
        { 
            path: '/teacher', //路径
            component: teacher //组件
        }
    ]
})

修改 学生组件

修改 Student.vue 文件：

  1. 增加导航菜单，即：添加 router-link 标签
    注意： to 属性通过 path 路径 实现跳转，类似 url 的写法，多层级，如下图：

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

完整代码

<template>
    <div class="app">
        <div>学生信息</div>
        <div>姓名：{{name}}</div>
        <div class="s1">
            <div class="menu">
                <h3>二级菜单</h3>
                <div>
                    <router-link active-class="action" to="/student/exam">考试管理</router-link>
                </div>
                <div>
                    <router-link active-class="action" to="/student/homework">作业管理</router-link>
                </div>
            </div>
            <router-view class="content"></router-view>
        </div>
    </div>
</template>
<script>
export default {
    data:function(){
        return {
            name:'李雷'
        }
    }
}
</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_1IX2kUrXObgk.html

吉ICP备15003043号