vue2如何设置动态路由

在Vue2中，设置动态路由一般需要以下步骤:

步骤1: 在路由表中定义静态路由和动态路由。

// 路由表（router/index.js）
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout' // 布局页面

Vue.use(Router)

// 静态路由
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true
  },
]

// 动态路由
export const asyncRoutes = [
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/page',
    name: 'Permission',
    meta: {
      title: 'Permission',
      icon: 'lock',
      roles: ['/permission'] // 用户权限列表
    },
  },
  // 404页面
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  scrollBehavior: () => ({ y: 0 }), // 切换路由始终保持页面顶部
  routes: constantRoutes // 只挂载静态路由
})

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // 重置路由，不同用户菜单权限会有所不同，在切换用户时，会出现菜单错乱的情况
}

export default router

步骤2: 在登录或获取用户权限的时候，根据用户的角色和权限列表生成对应的动态路由。

步骤3: 在路由守卫中动态添加路由。

// 路由守卫
router.beforeEach((to, from, next) => {
  const roles = getUserRoles() // 获取用户角色
  const permissionRoutes = generateRoutes(roles) // 根据用户角色生成对应的动态路由
  router.addRoutes(permissionRoutes) // 动态添加路由
  next()
})

请注意，在这个示例中，我们使用了`constantRoutes`来定义静态路由，`asyncRoutes`来定义动态路由。当用户登录或者刷新页面时，根据用户的角色和权限列表，动态生成对应的动态路由并添加到路由中。