vue addRoutes路由动态加载

需求：增长权限控制，实现不一样角色显示不一样的路由导航

思路：每次登录后请求接口返回当前角色路由

核心方法：vue-router2.2.0的addRoutes方法 + vuex

如下是我实现的获取菜单路由的方法，我将该方法的调用放在首页组件的生命钩子中，即使用户刷新浏览器清空了路由仍是会从新调用接口获取，不至于会丢失。同时考虑到会有切换用户的可能，因此不将获取到的路由信息保存到cookie或者localstorage当中

获取菜单以前先判断routerState，避免屡次请求, 我这里使用element-ui的导航菜单功能v-for循环this.myRouter参数便可显示动态路由导航

 1  /**
 2 * 获取菜单
 3 */
 4 getMenu () {
 5   if (this.$store.getters.routerState === false) {
 6     // 清理已经存在的动态路由
 7     this.clearDynamicRoute()
 8     // 更改请求路由状态为true
 9     this.$store.commit('SET_ROUTERSTATE', true)
10     getMyMenu().then((res) => {
11       if (res.code === '0') {
12         // 格式化路由，将数据转为addRoutes可接受的route格式数组
13         let myMenu = this.formatMenu(res.data.menu)
14         if (myMenu.length <= 0) { // 没有动态路由
15           return
16         }
17         for (let index = 0; index < myMenu.length; index++) {
18           // 将请求的路由先存放到options对象中
19           this.$router.options.routes.push(myMenu[index])
20         }
21         // 将完整须要显示的路由添加进去
22         this.$router.addRoutes(this.$router.options.routes)
23         // 这里将路由显示在页面上
24         this.MyRouter = this.$router.options.routes
25       }
26       // 在这里就能够打印出新路由
27       console.log(this.$router)
28     })
29   }
30 }