1、为实现菜单点击跳转功能,首先配置router文件夹下的index.js文件
①引入各个组件
代码如下:
//创建导航栏涉及的各个组件
import TeachingManage from '../views/TeachingManage.vue'
import ScientificManage from '../views/ScientificManage.vue'
import CourseCenter from '../views/CourseCenter.vue'
import QuestionBank from '../views/QuestionBank.vue'
import ExaminationPaperManage from '../views/ExaminationPaperManage.vue'
import TrainingManage from '../views/TrainingManage.vue'
import EvalutionManage from '../views/EvalutionManage.vue'
import SupervisionCenter from '../views/SupervisionCenter.vue'
import UserManage from '../views/UserManage.vue'
②配置子路由(一级菜单和二级菜单的子路由相似)
代码如下:
//将路由与组件进行映射
const routes = [
//主路由
{
path: '/',
component: Main,
children: [
{ path: '/home', name: 'home', component: Home },//首页
{ path: '/user', name: 'user', component: User },//测试user
{ path: '/teachingmanage', name: 'teachingmanage', component: TeachingManage },//教研管理
{ path: '/scientificmanage', name: 'scientificmanage', component: ScientificManage },//科研管理
{ path: '/coursecenter', name: 'coursecenter', component: CourseCenter },//课程中心
{ path: '/questionbank', name: 'questionbank', component: QuestionBank },//题库管理
{ path: '/examinationpaper', name: 'examinationpaper', component: ExaminationPaperManage },//试卷管理
{ path: '/trainingmanage', name: 'trainingmanage', component: TrainingManage },//培训管理
{ path: '/evalutionmanage', name: 'evalutionmanage', component: EvalutionManage },//评价管理
{ path: '/supervisioncenter', name: 'supervisioncenter', component: SupervisionCenter },//监管中心
{ path: '/usermanage', name: 'usermanage', component: UserManage },//用户管理
]
},
]
router文件夹下的index.js文件配置完成后,可通过url地址栏实现路由切换
2、在components文件夹下的CommonAside.vue绑定点击事件,实现页面跳转
①首先实现一级子菜单的目录跳转
<!-- 一级菜单 -->
<!-- index用于确定选中的菜单项,是唯一标识 -->
<!-- v-bind:(简写为:,用于属性绑定) -->
<el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :key="item.name" :index="item.name">
<!-- `el-icon-${item.icon}`与data中的数据绑定,实现动态拼接 -->
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{{ item.label }}</span>
</el-menu-item>
在methods中定义菜单切换功能点击事件 clickMenu(),由于需要获取选定的菜单路径以实现跳转,因此需要将选中的内容item作为参数传入点击事件中
由于router挂载到root实例中(App.vue),因此可利用$router进行引用,采用push方法将地址推入
//左侧导航栏实现菜单切换的点击功能
clickMenu(item) {
console.log(item)
this.$router.push({
path: item.path
})
}
此时即可实现<el-main>区域内的内容切换
②其次实现二级菜单的目录跳转
<!-- 二级菜单 -->
<el-submenu v-for=" item in hasChildren" :key="item.label" index="item.label">
<!-- slot表示插槽 -->
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{{ item.label }}</span>
</template>
<!-- 对子菜单进行渲染 -->
<el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
<el-menu-item @click="clickMenu(subItem)" :index="subItem.path">{{ subItem.label }}</el-menu-item>
</el-menu-item-group>
</el-submenu>
注意,在el-menu-item中绑定点击事件时,由于v-for 中定义的是subItem,因此点击事件传入的也为subItem,其中subItem获取了item.children中的子路由
<!-- 对子菜单进行渲染 -->
<el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
<el-menu-item @click="clickMenu(subItem)" :index="subItem.path">{{ subItem.label }}</el-menu-item>
</el-menu-item-group>
此时点击二级菜单时的页面示例如下:
补充说明
1、若存在路径跳转到斜杆/而导致页面不能显示,则需要采用重定向的方式
代码如下:
redirect:'/home',//重定向
2、重复点击同一目录,控制台会报错
这是由于router仅允许当前页面的路由与跳转路由不一致时才允许跳转
因此可向ClickMenu方法补充当前页面的路由与跳转路由是否一致的判断说明,代码如下:
//点击菜单实现路由跳转
//item是点击菜单时,存储返回路由信息(可获得当前的名称与跳转的路径)
clickMenu(item) {
console.log(item)
//当前页面的路由与跳转路由不一致时才允许跳转
//this.$route获取当前路由,this.$router获取整个router实例
//!(this.$route.path==='/home' && (item.path==='/'))防止当前获取'/'重定向到home时报错
if (this.$route.path !== item.path && !(this.$route.path === '/home' && (item.path === '/'))) {
this.$router.push(item.path)
}
}