Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)，其实就是路由在后台配置 前端请求接口后 生成路由表

最近刚结束一个项目，然后再客户的百般刁难下又增加了项目新需求：
后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)
vue项目实现动态路由的方式大体可分为两种:
1.第一种就是我们前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)
详情可以看看这个人写的，感觉挺好的
https://segmentfault.com/a/1190000009275424,我当时看这个项目看了好久才明白一点逻辑，
因为大神的动态路由那里有好多层判断，并且穿插各种vuex，把小白的我都快搞懵逼了，对我启发很大，也正是这篇文章，给我提供了很多逻辑
2.第二种就是后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)
这两种方法各有优点，效果都能实现，我们公司这次是要求通过第二种方法实现，原因就是公司项目里有一个专门的用户中心，里边逻辑很复杂，不好返给前端用户权限，担心路由放到前端
不安全(以上的话是公司的后台同学讲的，其实我也不知道，按照要求总不会有错)，那好吧，抱着都试试、锻炼下自己能力的态度，
我们来搞第二种方法。

思路：

1.后台同学返回一个json格式的路由表，我用easy mock造了一段:动态路由表，大家可参考（easymock就是个模拟后台数据接口的，你习惯用啥都可以。mock / RAP /等）;
2.因为后端同学传回来的都是字符串格式的，但是前端这里需要的是一个组件对象，所以要写个方法遍历一下，将字符串转换为组件对象;
3.利用vue-router的beforeEach、addRoutes、localStorage来配合上边两步实现效果;
4.左侧菜单栏根据拿到转换好的路由列表进行展示;

操作的大体步骤：1.拦截路由->2.后台取到路由->3.保存路由到localStorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)

代码第一步，模拟的后台json数据路由表 ：

每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列，右侧页面,所以children下边的第一级路由就是你自己的开发的页面,meta里包含着路由的名字，以及路由对应的icon;因为可能会有多级菜单，所以会出现children下边嵌套children的情况;

"data": {
    "router": [
      {
        "path": "", // 路径
        "component": "Layout", // 组件
        "redirect": "dashboard", // 重定向
        "children": [ // 子路由菜单
          {
            "path": "dashboard",
            "component": "dashboard/index",
            name: 'dashboard'
            "meta": { // meta 标签
              "title": "首页",
              "icon": "dashboard" // 图标
              noCache: true 
            }
          }
        ]
      },
      {
        "path": "/example",
        "component": "Layout",
        "redirect": "/example/table",
        "name": "Example",
        "meta": {
          "title": "案例",
          "icon": "example"
        },