最近刚结束一个项目，然后再客户的百般刁难下又增加了项目新需求：
后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)
vue项目实现动态路由的方式大体可分为两种:
1.第一种就是我们前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)
详情可以看看这个人写的，感觉挺好的
https://segmentfault.com/a/75424,我当时看这个项目看了好久才明白一点逻辑，
因为大神的动态路由那里有好多层判断，并且穿插各种vuex，把小白的我都快搞懵逼了，对我启发很大，也正是这篇文章，给我提供了很多逻辑
2.第二种就是后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)
这两种方法各有优点，效果都能实现，我们公司这次是要求通过第二种方法实现，原因就是公司项目里有一个专门的用户中心，里边逻辑很复杂，不好返给前端用户权限，担心路由放到前端
不安全(以上的话是公司的后台同学讲的，其实我也不知道，按照要求总不会有错)，那好吧，抱着都试试、锻炼下自己能力的态度，
我们来搞第二种方法。
思路：
代码第一步，模拟的后台json数据路由表 ：
每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列，右侧页面,所以children下边的第一级路由就是你自己的开发的页面,meta里包含着路由的名字，以及路由对应的icon;因为可能会有多级菜单，所以会出现children下边嵌套children的情况;
当我们有了模拟数据后，我们可以写正常代码了，首先找到router文件夹下的index.js文件。咱们的路由配置一般都在router文件夹下，除非你们公司项目自己封装了多层，但是找到路由文件就行。
在然后我们在 src 文件permission.js文件中写代码（permission权限文件是直接在src文件夹下的，和router 平级，后边我们只需要把permission权限文件引入到main.js 文件下就好了）
我们引入文件
permission.js文件代码如下：
router/_import_development.js
动态路由也就基本完成了！
拿到遍历好的路由，进行左侧菜单渲染
上边的permission.js文件代码处理中会给 global.antRouter赋值，这是一个全局变量（可以用vuex替代），菜单那边拿到路由，进行渲染，（对于路由拦截那部分，应该还有很多优化的地方的）
可能遇到的问题：
思路是这样
然后再APP.vue文件中
AsyncImport.js
router.js文件中
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/9012.html