vue-element-admin动态路由

Vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统模板。它提供了很多常用的功能和组件，包括动态路由。

动态路由是指在运行时根据用户角色或权限动态生成路由。在 Vue-element-admin 中，动态路由可以通过配置路由表来实现。以下是一个示例：

// 需要动态生成的路由
const asyncRoutes = [
  {
    path: '/dashboard',
    component: Layout,
    redirect: '/dashboard/index',
    children: [
      {
        path: 'index',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: 'Dashboard', icon: 'dashboard' }
      }
    ]
  },
  // 其他路由
]

// 路由表
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: 'Dashboard', icon: 'dashboard' }
      }
    ]
  },
  // 其他路由
]

const createRouter = () => new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: constantRoutes
})

const router = createRouter()

// 添加动态路由
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

在上面的示例中，`asyncRoutes` 定义了需要动态生成的路由，`constantRoutes` 定义了不需要动态生成的路由。在 `createRouter` 函数中，路由表默认为 `constantRoutes`，并通过 `resetRouter` 函数来添加动态路由。

当用户登录后，可以根据用户角色或权限来生成动态路由，并重新设置路由表。例如：

// 登录成功后生成动态路由并重新设置路由表
store.dispatch('user/getUserInfo').then(user => {
  const accessedRoutes = generateRoutes(user.roles)
  router.addRoutes(accessedRoutes)
  next({ ...to, replace: true })
}).catch(() => {
  store.dispatch('user/resetToken').then(() => {
    Message.error('登录失败，请重新登录')
    next({ path: '/login' })
  })
})

在上面的示例中，`generateRoutes` 函数根据用户角色生成动态路由，并通过 `addRoutes` 函数将动态路由添加到路由表中。然后使用 `next` 函数跳转到目标路由。

注意：Vue-element-admin 的动态路由只是一个示例，实际的路由生成方案应该根据具体需求进行设计。