vue 右边跳转 实现左侧栏_Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)...

2019.4.28号更新：

鉴于大家有很多疑问，特地创建了群1020135830，有问题的多交流交流；

2019.4.3号更新：

我说为啥点进来看不到最新的评论，今天才发现是被折叠了，

这篇教程大家理解起来如果有难度的话，

参考下把路由表写到本地，后端返回用户角色去做匹配这种方式，适合上手:本地写好路由，向后端请求用户的角色

以下为原答案：

地狱空荡荡，师兄在土创。虽然土，但是可以疗伤。

前言

vue项目实现动态路由的方式大体可分为两种:

1.前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)

详情可参阅花裤衩大佬的项目手把手...,我当时看这个项目看了好久才明白一点逻辑，

因为大神的动态路由那里有好多层判断，并且穿插各种vuex，把小白的我都快搞懵逼了，对我启发很大，也正是这篇文章，给我提供了很多逻辑

2.后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)

这两种方法各有优点，效果都能实现，我们公司是通过第二中种方法实现的，原因就是公司项目里有一个专门的用户中心，里边逻辑很复杂，不好返给前端用户权限，担心路由放到前端

不安全(以上的话是公司的后台同学讲的)，那好吧，抱着都试试、锻炼下自己能力的态度，

我们搞了第二种方法。

今天我们来讲讲用后台传递路由表实现动态路由的思路，因为公司的项目里路有部分用到了vuex，我就把路由部分脱离vuex整理了出来，让大家有个启发，并不是绝对的解决方案，只是思路

github:https://github.com/Mrblackant...

思路整理

以下四步骤对应的代码都在下方会讲到，并且是对应的

1.后台同学返回一个json格式的路由表，我用easymock造了一段:动态路由表，大家可参考;

2.因为后端同学传回来的都是字符串格式的，但是前端这里需要的是一个组件对象啊，写个方法遍历一下，将字符串转换为组件对象;

3.利用vue-router的beforeEach、ad