vue addRoutes路由動態加載

需求：增加權限控制，實現不同角色顯示不同的路由導航

思路：每次登陸后請求接口返回當前角色路由

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

以下是我實現的獲取菜單路由的方法，我將該方法的調用放在首頁組件的生命鈎子中，即便用戶刷新瀏覽器清空了路由還是會重新調用接口獲取，不至於會丟失。同時考慮到會有切換用戶的可能，所以不將獲取到的路由信息保存到cookie或者localstorage當中

獲取菜單之前先判斷routerState，避免多次請求, 我這里使用element-ui的導航菜單功能v-for循環this.myRouter參數即可顯示動態路由導航

 /**
* 獲取菜單
*/
getMenu () {
  if (this.$store.getters.routerState === false) {
    // 清理已經存在的動態路由
    this.clearDynamicRoute()
    // 更改請求路由狀態為true
    this.$store.commit('SET_ROUTERSTATE', true)
    getMyMenu().then((res) => {
      if (res.code === '0') {
        // 格式化路由，將數據轉為addRoutes可接受的route格式數組
        let myMenu = this.formatMenu(res.data.menu)
        if (myMenu.length <= 0) { // 沒有動態路由
          return
        }
        for (let index = 0; index < myMenu.length; index++) {
          // 將請求的路由先存放到options對象中
          this.$router.options.routes.push(myMenu[index])
        }
        // 將完整需要顯示的路由添加進去
        this.$router.addRoutes(this.$router.options.routes)
        // 這里將路由顯示在頁面上
        this.MyRouter = this.$router.options.routes
      }
      // 在這里就可以打印出新路由
      console.log(this.$router)
    })
  }
}