vue-element-admin 实现动态路由(从后台查询出菜单)

最新推荐文章于 2025-06-27 09:09:05 发布

原创

最新推荐文章于 2025-06-27 09:09:05 发布 · 2.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在vue-element-admin项目中实现动态路由，通过调用vuex的user模块获取菜单信息，然后利用filterAsyncRouter.js过滤生成权限路由，最后在src/permission.js中修改generateRoutes方法，确保路由地址根据后台数据动态注入。

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

1 在路由实例中保留公共基础路由

export const constantRoutes = [{
   
   
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [{
   
   
      path: '/redirect/:path(.*)',
      component: () => import('@/views/redirect/index')
    }]
  },
  {
   
   
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
   
   
    path: '/auth-redirect',
    component: () => import('@/views/login/auth-redirect'),
    hidden: true
  },
  {
   
   
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true