VUE-Element组件（二）NavMenu导航菜单

w_t_y_y

已于 2022-05-25 16:22:36 修改

阅读量1w

点赞数 3

分类专栏： # VUE页面开发文章标签： vue

于 2020-04-09 16:03:12 首次发布

本文链接：https://blog.youkuaiyun.com/w_t_y_y/article/details/105412906

版权

本文详细介绍了如何使用Vue-Element的NavMenu组件创建导航菜单，包括实现本页跳转的配置、固定菜单实例、菜单权限动态控制的方法，以及解决样式问题。同时提供了路由配置、权限拦截、登录逻辑和数据库配置等相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标签介绍：el-menu为导航菜单组件，el-menu-item表示无子菜单的菜单项，el-submenu表示有子菜单的菜单项。注意el-menu-item和el-submenu最好都加上index标签，标志唯一性，否则会出现展开一个菜单所有的菜单都展开或者收缩一个菜单所有的菜单都收缩的问题。

一、使用NavMenu做为导航菜单，实现的不好会出现点击菜单跳转到新页面的情况。如果想要实现本页跳转，可以参考以下步骤：

1、导航页（含NavMenu组件页面）需要做为其他页面的父级路由和父级路径。如导航页文件为index.vue，现有用户页文件user.vue，这个user和index的文件目录没有任何要求，但user的路由需要是index的子路由(写在children下面)，且路径需要被index的路径包含，如index路径为/index，user路径为/user，是不可以的，此时user的路径需要是/index/...，如下是我的路由js实例：

 {
    path: '/menu',
    name: 'menu',
    hidden:true,
    component: () => import('@/views/menu/index'),
    children: [
      //给菜单页一个默认的菜单显示
      {
        path: '/user',
        redirect: 'user'
      },
     
      {
        path: '/menu/user',
        name: 'user',
        component: () => import('@/views/menu/user')
      },
       {
        path: '/menu/role',
        name: 'role',
        component: () => import('@/views/menu/role')
      },
    ]
  }

同样的，页里面如果再进行跳转（如我的/menu/user是一个用户列表，点击列表的详情按钮跳转到详情页），并且希望详情页也显示侧边的导航栏，这个详情页也要是导航页的子路由、子路径：

 {
    path: '/menu',
    name: 'menu',
    hidden:true,
    component: () => import('@/views/menu/index'),
    children: [
      //给菜单页一个默认的菜单显示
      {
        path: '/user',
        redirect: 'user'
      },
     
      {
        path: '/menu/user',
        name: 'user',
        component: () => import('@/views/menu/user')
      },
      {
        path: '/menu/user/detail',
        name: '用户详情页',
        component: () => import('@/views/menu/user/detail/index')
      },
       {
        path: '/menu/role',
        name: 'role',
        component: () => import('@/views/menu/role')
      },
    ]
  }

2、el-menu菜单组件标签加上如下配置： :default-active="$route.path"和router，开启路由：

<el-menu
            :default-active="$route.path"
            router
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >

3、需要跳转的菜单el-menu-item标签上index使用路由表示，如

<el-menu-item index="/menu/user/index">            
      用户管理
  <!--router-link可以省略 -->
  <!-- <router-link to="/menu/user/index"> </router-link> -->  
</el-menu-item>

4、菜单导航页使用<router-view></router-view>做为每个页面的显示部分，也即index跳转的页面。

二、固定菜单实例：

1、效果：访问系统判断是否已登录，未登录则跳转到登录页，已登录则进入中间页（额外插入的功能，测试navbar做导航），从中间页可以进入首页。

（1）登录页：

（2）登录成功跳转到中间页：

（3）点击其他菜单试试：

（4）点击第一个菜单页里面的按钮“点击跳转”，这个才是我插入navbar测试页之前的主页，这里的菜单权限是从后台配置的：

2、代码：

（1）route路由：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '../views/layout/Layout'

export const constantRouterMap = [
  { path: '/404', component: () => import('@/views/404'), hidden: true },
  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
  {
    path: '/midtest',
    name: 'midtest',
    hidden:true,
    component: () => import('@/views/midtest/index'),
    children: [
      {
        path: '/midtest',
        redirect: 'midtest1'
      },
     
      {
        path: '/midtest/midtest1',
        name: 'midtest1',
        component: () => import('@/views/midtest/midtest1')
      },
      {
        path: 'midtest2',
        name: 'midtest2',
        component: () => import('@/views/midtest/midtest2')
      },
      {
        path: 'midtest3',
        name: 'midtest3',
        component: () => import('@/views/midtest/midtest3')

      },
      {
        path: 'midtest41',
        name: 'midtest41',
        component: () => import('@/views/midtest/midtest4/midtest41')

      },
      {
        path: 'midtest42',
        name: 'midtest42',
        component: () => import('@/views/midtest/midtest4/midtest42')

      },
      {
        path: 'midtest51',
        name: 'midtest51',
        component: () => import('@/views/midtest/midtest5/midtest51')

      },
      {
        path: 'midtest521',
        name: 'midtest521',
        component: () => import('@/views/midtest/midtest5/midtest521')

      },
      {
        path: 'midtest522',
        name: 'midtest522',
        component: () => import('@/views/midtest/midtest5/midtest522')

      }
    ]
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: '首页',
    icon: '首页',
    hidden: true,
    children: [{
      path: '/dashboard',
      component: () => import('@/views/dashboard/index')
    }]
  }
]
/**
* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
* alwaysShow: true               if set true, will always show the root