【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——⑥项目开发基于实现菜单单击跳转功能

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)
            }
        }