vue - 动态路由

vue-router 文档

方法使用：router.addRoutes(routes: Array<RouteConfig>)

• 传入路由集合
• 运行后会在已配置路由基础上添加新的路由
• 若存在相同路由不会覆盖
• 一个用户角色只能动态配置一次路由

项目中使用（参考vue-elementui-admin模板项目中的配置）：

路由文件结构

• modules文件夹内是不同用户角色对应的路由配置
• 每个文件内路由结构为routes: Array，跟正常配置路由一样格式
  

用户角色登录

设置用户信息（用于判断该用户是否已设置过路由，SET_USER是保存vuex中用户userId）

  SET_USER: (state, userId) => {
    state.userId = userId
  }

路由跳转控制文件（此文件需在main中引入使用）

判断用户角色配置路由

• store.getters.userId为保存的用户ID，存在userId则代表已动态配置过路由
• 若没有userId，则执行getInfo获取角色信息并在changeRouter中根据不同用户角色动态配置对应的文件路由
• next({ …to, replace: true })配置完角色路由后重新跳转就可以跳转到添加的路由页面
  
  
  总结：
  • 路由配置文件按角色分开
  • 使用路由跳转拦截获取角色信息并配置动态路由后再次执行跳转一次
  • 动态配置完角色路由后跳转到不同的首页