vue-router动态加载路由

我们用vue开发一个带权限的管理系统。根据不用的用户，显示菜单项不同

场景：前端菜单不是静态的写在vue程序里，而是要从后台接口中获取的的菜单列表 来 动态加载到vue应用中

思路：1、登录成功的同时后台会返回给我们菜单列表，此时我们便在vue-router中插入这个菜单所对应的路由配置

           2、配置好路由后，在添加左侧菜单静态效果

           3、如果用户没有该菜单的权限，但是自己在网页地址栏输入了该菜单的地址。此时我们应该把页面重定向到首页

实现：这里我们重点只说如何插入路由，很简单：

1、首先插入路由   this.$router.options.routes[0].children.push() 。这里我们可以console.log(this.$router.options)查看一下。

this.$router.options.routes[0].children.push({// 插入路由
    name: 'map',
    path: '/map',
    component: resolve => require(['../page/map'], resolve)// 将组件用require引进来
})

2、当所有路由插入好，调用插入的路由。做到这里路由就已经注册完毕可以正常使用了

this.$router.addRoutes(this.$router.options.routes)// 调用addRoutes添加路由

这里我扔一个最近项目中的例子，在二级路由中继续添加路由。有需要的可以参考一下

      if (list.indexOf('map/getMapPage') !== -1) {
        this.$router.options.routes[1].children.push({// 插入路由
          name: 'map',
          path: '/map',
          component: resolve => require(['../page/map'], resolve)// 将组件用require引进来
        })
      }
      if (list.indexOf('getDeviceList') !== -1 || list.indexOf('getDeviceList') !== -1) {
        let routerData = {
          path: '/device',
          name: 'device',
          component: resolve => require(['../page/device/content.vue'], resolve),
          children: [
            {
              path: '/device/basiclist',
              name: 'basiclist',
              component: resolve => require(['../page/device/basiclist.vue'], resolve)
            }
          ]
        }
        if (list.indexOf('getDeviceList') !== -1) {
          routerData.children.push(
            {
              path: '/device/basiclist',
              name: 'basiclist',
              component: resolve => require(['../page/device/basiclist.vue'], resolve)
            },
            {
              path: '/device/basicNew',
              name: 'basicNew',
              component: resolve => require(['../page/device/basicNew.vue'], resolve)
            }
          )
        }
        if (list.indexOf('getGroupList') !== -1) {
          routerData.children.push(
            {
              path: '/device/grounplist',
              name: 'grounplist',
              component: resolve => require(['../page/device/grounpList.vue'], resolve)
            }
          )
        }
        this.$router.options.routes[1].children.push(routerData)
      }
      this.$router.addRoutes(this.$router.options.routes)// 调用addRoutes添加路由