怎么在vue中使用addRoutes实现动态路由

怎么在vue中使用addRoutes实现动态路由？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

//初始路由：
[{
 path: '/login',
 name: 'login',
 component: (resolve) => require(['../views/common/404.vue'], resolve)
}, {
 path: '/404',
 name: '404',
 component: (resolve) => require(['../views/common/404.vue'], resolve)
}, {
 path: '*',
 redirect: '/404'
}]

//登录逻辑
let vm = this;
axios.get('/login', vm.user).then((res) => {
  let extendsRoutes = filterRoutes(res.menus); 
  <!--
  //假设得到的可用路由如下
  [{
   path: '/',
   name: '首页',
   component: (resolve) => require(['../views/index.vue'], resolve),
   children: [{
    path: '/menus',
    name: '菜单管理',
    component: (resolve) => require(['../views/menus.vue'], resolve)
   }, {
    path: '/resources',
    name: '资源管理',
    component: (resolve) => require(['../views/resources.vue'], resolve)
   }]
  }]-->
  //存菜单
  sessionStorage.setItem('menus',JSON.stringify(extendsRoutes[0].children));
  //动态添加路由
  vm.$router.addRoutes(extendsRoutes);
  //跳转到应用界面
  vm.$router.push({path:'/'});
})

//首页获取菜单数据
this.menus = JSON.parse(sessionStorage.getItem('menus')); 
//用此数据循环菜单
..

目前为止看上去一切顺利，然而前方有坑。

动态路由的坑

第一个坑是，如果你将这套逻辑实现之后会发现打开应用看到的第一个页面是404，这是因为启动服务后将默认打开首页'/‘，然而初始路由中没有这个路径，因此根据路由规则跳转到了404。我们希望结果当然是跳转到'/login'，因此需要对这种情况做判断，在用户登录之前所有请求都要指向'/login'，这个判断可以在before钩子里做也可以在根组件里做，建议做在根组件的created回调里，核心代码大概这样：

let isLogin = sessionStorage.getItem('user');
if(!isLogin){
  return this.$router.push({path:'/login'});
}

这时候已经可以顺利登录了，登录后很快就会发现第二个坑，手动刷新页面又会跳到404，这是因为刷新会导致Vue重新实例化，路由也恢复到了初始路由，于是当前路径又被重定向到了404，这个问题的根源是可用路由没有实现持久化，那么可以通过将路由数据存sessionStorage来解决，实例化之前如果检测到本地路由就直接合并路由，像这样：

//检测本地路由
let localRoutes = sessionStorage.getItem('routes');
if(localRoutes){
  router.addRoutes(JSON.parse(localRoutes));
}
//实例化
new Vue({
 el: '#app',
 router,
 render: h => h(App)
});

理论上可以，但实际操作要远比上述代码复杂，因为存在本地的只能是权限数据而不是真实路由，路由在存、取之前都要先根据权限匹配获得，过程还是挺繁琐的，而且必须依赖sessionStorage这种持久存储，没有其他方法。问题就出在这个sessionStorage上，原则上权限只能在内存变量中流转，不能直接暴露到用户可操作的地方，试想只要用户手动修改了sessionStorage里的权限，再刷新一下页面就能突破前端路由控制了，非常的不靠谱。

改进方案

既然不能存本地，那就每次刷新都重新从服务端获取，所以改进后的方案是本地存用户token，每次刷新要凭token从服务端重新获取用户信息和权限，然后动态更新路由，获取权限操作可以跟登录检测一起放在根组件的created回调中进行，确保访问任何路径都会先执行这一步，但因为获取权限是异步操作，在此之前仍然会经过应用初始化，所以还是会遇到404的问题，为此我们只需做一个小调整，将不匹配路径(‘*')跳404的路由从初始路由中移除，动态更新路由时再把这个配置加进去，如下：

let userPath = ...//我们的动态路由
//注入时拼接404处理路由
this.$router.addRoutes(userPath.concat([{
 path: '*',
 redirect: '/404'
}]));

这样就解决了刷新问题，后面还有几个小问题就简单了。

首先是菜单，之前通过$router.options.routes访问路由数据实现动态菜单，但这个数据不是响应式的，无法追踪动态路由的变化，因此我们需要将得到的导航菜单数据存到sessionStorage或Vuex里实现数据共享。

资源权限控制也受到很大的影响，实现较为细致的权限控制需要一个自定义权限验证指令和一个全局验证方法，之前的方案里权限是在Vue实例化之前获取的，所以可以很方便的拿到权限后实现验证方法，然后用验证方法实现自定义指令，再将方法全局混合进Vue，然后实例化，这样实例中的 所有组件都可以使用自定义指令和验证方法；但现在的方案是先实例化再获取权限，实例化之前根本没有权限数据，所以自定义指无法实现，等拿到权限后实现了验证方法，却无法再全局混合了。

这个问题最后也解决了，但解决方案就彻底的”有辱斯文”了，首先是全局方法的实现，直接这么做:

Vue.prototype.has = function(){
  ...
}

使用方式跟全局混合的方法完全一样。

自定义指令的实现本来很头疼，因为全局指令只能在实例化之前实现，但那时候又确实没有权限，不过既然验证方法这么做的话，指令倒是也顺便解决了，像这样：

//权限指令
Vue.directive('has', {
 bind: function(el, binding) {
  if (!Vue.prototype.has(binding.value)) {
   el.parentNode.removeChild(el);
  }
 }
});

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。