vue-element-admin （三）动态路由动态菜单栏

最新推荐文章于 2025-10-05 06:38:23 发布

原创

最新推荐文章于 2025-10-05 06:38:23 发布 · 3.2k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了在vue-element-admin项目中如何实现动态路由和动态菜单栏。通过根据用户token获取权限，动态加载相应的菜单。涉及关键文件包括`src/router/index.js`、`src/store/getters.js`以及在`src/router`下创建的`_import_development.js`和`_import_production.js`。在`src/permission.js`中，将动态菜单与无需权限的路由合并。在处理菜单栏时，需要注意后台返回的name与前端路由的匹配，以及路径前缀的正确设置，以避免页面路径错误导致的警告。

根据登录人的token 获取权限，显示相应的菜单栏

src/router/index.js

export const constantRoutes = [   // 只留下这些不需要权限显示的
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/main',
    children: [{
      path: 'main',
      name: '首页',
      component: () => import('@/views/main/index'),
      meta: { title: '首页 ' }
    }]
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  // 404 页面必须放在最后 !!!
]


const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

在获取菜单栏的 modules 的 js 文件里

import { menu } from '@/api/admin'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: '',
    menus:[]    // 还有这个
  }  
}

const state = getDefaultState()

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },
  SET_TOKEN: (state, to