使用場景：使用者登入後獲取選單列表，然後動態新增路由和選單，實現根據使用者許可權實現動態新增路由。
昨天搞了半個晚上一直困惑使用(router.addroutes)在路由***裡，一直問題，今天早上到了公司，諮詢了下老大和乙個前段大佬終於搞定了，直接上**了
login.vue（登入介面）
import from "@/router"
async login() ,
/* 路由設定 */
import vue from 'vue'
import router from 'vue-router'
import store from '@/store'
vue.use(router)
/* 動態載入路由模組, 呼叫遠端api獲取 */
const createrouter = () =>
const routes = [,,
,children: childrens}];
const originalpush = router.prototype.push
router.prototype.push = function push(location) ;
const router = new router();
// 路由攔截
router.beforeeach((to, from, next) => else else )}}
});return router;
};const router = createrouter();
// 重新匹配路由方法
export function resetrouter()
/** * 遍歷後台傳來的路由字串，轉換為元件物件
* @param routermap
*/function filterrouter(routermap)
return true
})return accessedrouters
}export default router;
1.當初次載入時，根據token去判斷是否去呼叫獲取選單路由介面，因為沒有登入，所以router裡只有基本的登入、異常路由，不會載入動態路由；
2.當登入成功後執行router裡的resetrouter方法，這裡的token就有值了，就可以呼叫獲取選單路由介面，將獲取了的資料存到快取裡(為動態新增左側選單使用)，然後整理後拼接到router裡然裡，然後使用matcher重新匹配路由，實現動態新增路由功能；
3.在home.vue(使用的是element-ui的 container 布局容器)裡通過快取裡的值，動態繫結左側選單，然後展示出來，具體顯示成什麼樣子，可以根據自己需求定；
4.這裡為什麼要使用快取，不使用 this.$router.options 取動態繫結左側選單呢。因為這裡如果使用這個有問題，再初次顯示的時候 this.$router.options 裡沒有動態的路由，可能和 router.matcher 的重新匹配機制有關係，具體不知道**的問題，等我做過調研了在貼出來原因，如果有知道的小夥伴一定要告訴我呀！一定要告訴我呀！一定要告訴我呀！重要的事情要說三遍嘛！
container 布局容器：「
思考問題：如何動態新增路由選單，就是有乙個新增選單功能，每新增乙個導航選單就動態新增乙個路由？
vue動態新增路由
通過routers中的addroutes方法動態新增路由 const routeobj routearr.push routeobj this.routers.addroutes routearr 注意 this.routers.addroutes arr 引數是陣列 過程遇到問題 1 重複路由 如...
vue 動態路由
因為去官方看英文文件 對例子探索了下 所以 自己也寫了乙個簡單的demo body div id h1 hello h1 p router link to go to foo router link 繫結路由和動態引數 router link to bar 3 go to bar router li...
vue動態路由
addroutes新增的動態頁面重新整理後進入404頁面解決方案 起因因為某個功能的上線與否由後台介面決定，而這個功能可能不止乙個頁面，我們希望每次使用者開啟頁面前，都能呼叫這一介面確定這個功能是否已經啟用，若啟用則直接開啟相關頁面，若未啟用則不顯示相關頁面，直接跳轉入404萬用字元設定的頁面。很顯...