Vue实现嵌套路由
原文链接:https://blog.csdn.net/zhanggqianglovec/article/details/124308680
嵌套路由又称为子路由,在实际应用中,通常由多层嵌套的组件组合而成。同样地,URL中各段动态路景观也按某种结构对应嵌套的各层组件,例如我们看Vue的官网教程。
当我们点击左边的项目的时候,我们知道,他左边和上面两个导航栏是不会改变的。改变的只是右边那一块区域。将鼠标放在某个标签上面,我们可以看到,他就是一个路由。或者我们应该说,他就是一个子路由。接下来,我们就说一下怎么实现这个子路由功能。
我们先去ElemetUI里面选一个吧。我选的是下面
它对应的代码如下:我们将它写到我们的Main.vue文件中即可(被我稍作了修改,毕竟我们只是学习,也不需要用那么多)。
<template>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<!-- 菜单默认打开第一个 -->
<el-menu :default-openeds="['1']">
<!-- 索引表示他是左边导航栏的第几个 -->
<el-submenu index="1">
<!-- 这个是大的导航栏 -->
<template slot="title"><i class="el-icon-message"></i>学籍管理</template>
<!-- 这是大导航里面展开的小列表 -->
<el-menu-item-group>
<el-menu-item index="1-1">
<!-- 子路由跳转 -->
<router-link to="/student/grade">学生成绩管理</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<!-- 子路由跳转 -->
<router-link to="/student/register">学生注册管理</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<!-- 这个是大的导航栏 -->
<template slot="title"><i class="el-icon-message"></i>职员管理</template>
<!-- 这是大导航里面展开的小列表 -->
<el-menu-item-group>
<el-menu-item index="2-1">教师信息管理</el-menu-item>
<el-menu-item index="2-2">教师工资管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-main>
<!-- 让主体做子路由的显示 -->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: 'Main'
}
</script>
<style>
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
写完之后,我们就可以根据上面写的子路由的路径,来写我们的子路由了。
先新建一个student目录,然后随便写两个Vue文件,一个叫Grade.vue,一个叫Register.vue。
内容随便写个div并导出即可,如下:
然后到路由下面进行引入和注册。
注意,这里是在主页里面加children,然后再加我们的路由。
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login'
import Main from '../views/Main'
import Register from '../views/student/Register.vue'
import Grade from '../views/student/Grade.vue'
Vue.use(Router);
export default new Router({
routes:[
//登錄頁
{
path:'/login',
name:'Login',
component:Login
},
//主页
{
path:'/main',
name:"Main",
component:Main,
children:[
{
path:'/student/register',
name:"Register",
component:Register,
},
{
path:'/student/grade',
name:"Grade",
component:Grade,
}
]
}
]
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
之后我们就可以直接点击跳转我们的子路由啦。
点击学生成绩管理,显示
点击学生注册管理显示: