vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

大佬教程收集整理的这篇文章主要介绍了vue-router+vuex addRoutes实现路由动态加载及菜单动态加载，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

此案例主要实现了一个功能是，在vue实例首次运行时，在加载了login和404两个路由规则，登录成功后，根据登录用户角色权限获取该角色相应菜单权限，生成新的路由规则添加进去。

做过后台管理系统都一定做过这个功能，在对菜单权限进行粗粒度权限控制的时候，通过角色获取菜单后，异步生成菜单，所以一开始拿到需求的时候，我也以为这和平常的没什么不同，不过做起来就发现了很多问题，

1.vue-router的实例，在New vue实例的时候，就加载了，且必须加载，这个时候，登录路由一定要加载，可是这个时候没有登录，无法确定权限 2.路由规则与菜单的同步

解决思路演化，菜单和路由同步，肯定是采用了vuex，一开始的思路的是，在一开始，就把所有的路由规则加载，然后在登录的时候，取得权限路由，对比两个路由，通过修改修改一个权限字段来隐藏菜单，如果在后台页面添加了新菜单规则，路由是按模块加载的不同的文件，这时对路由的文件进行新的读写，虽然可以解决问题，但是如果手动在浏览器地址上路由，依然可以访问，所以在路由的全局钩子上还要做拦截。

这个解决方案虽然解决，但是显的比较复杂，于是就想需找新的方法，重新浏览官方api，发现在2.2.0以后，官方新增了api，addRoutes，专门针对服务端渲染路由，那么这下问题就比较简单了，下面列出实现代码。以下代码不能直接复用，需要根据实际情况修改，只是提供思路

app.js

 { 
 if (state.app.device.isMobile && state.app.sidebar.opened) { 
  store.commit(TOGGLE_SIDEBAR,falsE) 
 } 
 if (route.path === '/login') { 
  window.sessionStorage.removeItem('user') 
  window.sessionStorage.removeItem('permission') 
  store.commit(ADD_MENU,[]) 
 } 
 let user = JSON.parse(window.sessionStorage.getItem('user')) 
 if (!user && route.path !== '/login') { 
  next({ path: '/login' }) 
 } else { 
  if (route.Name) { 
   next() 
  } else { 
   next({ path: '/nofound' }) 
  } 
 } 
}) 

大佬总结

以上是大佬教程为你收集整理的vue-router+vuex addRoutes实现路由动态加载及菜单动态加载全部内容，希望文章能够帮你解决vue-router+vuex addRoutes实现路由动态加载及菜单动态加载所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。