最近項目中使用了vue-router的addRoutes這個api，遇到了一個小坑，記錄總結一下。

場景復現：

做前端開發的同學，大多都遇到過這種需求：頁面菜單根據用戶權限動態生成，一個常見的解決方案是：

前端初始化的時候，只掛載不需要權限路由，如登陸，注冊等頁面路由，然后等用戶登錄之后，后端返回當前用戶的權限表，前端根據這個權限表遍歷前端路由表，動態生成用戶權限路由，然后使用vue-router提供的addRoutes,將權限路由表動態添加到路由實例中，整個過程大致如下：

// router.js 文件 // 需要用戶權限的路由表const appRoutes = [ { path: ’/dashboard’, name: ’dashboard’, component: () => import(’...’), children: [ RouteConfig1, RouteConfig2, ... ] }, RouteConfig, ...]; // 不需要用戶權限的路由表const constantRoutes = [ { path: ’/login’, name: ’login’, component: Login }, { path: ’/register’, name: ’register’, component: Register }, ...] // 初始化路由的時候，只掛載不需要用戶權限的路由表const router = new VueRouter({ mode: ’history’, base: process.env.BASE_URL, constantRoutes}); /** * * 假如后端返回的數據格式如下： * * { * status: 200, * message: ’successful’, * data: { * user: {...}, * token: ’...’, * permisssion: [...] * } * } * * login.vue */axios.post(’/user/login’,{username,password}) .then(res => { if (res.status === 200) { // 如果登錄成功，則需要遍歷生成用戶權限路由 // filterRoutes根據permission和router.js中定義的appRoutes生成動態路由表 const routes = filterRoutes(permission); // 然后使用addRoutes將routes掛載到router中 router.addRoutes(routes); } else { ... } }) .catch(error => { ... })

寫到這里，貌似動態生成路由的功能就好了，一切都perfect了，但問題緊接著就來了，當用戶登錄之后，我們點擊頁面上的退出按鈕退出當前登錄，然后重新登錄，會發現瀏覽器console面板緊接著就報如下錯誤：

納尼(⊙o⊙)？這是怎么回事呢，第二次登錄也正常登錄了，功能上似乎沒有什么問題，但這個警告從哪里來的呢？對于一個重度強迫癥患者來說，任何警告和報錯都是不允許出現的，哪怕功能上沒什么問題。

捋一捋

這段警告的意思是說，以上的這幾個路由命名重復，存在多個name相同的路由。那么為什么會有多個路由名稱相同的路由呢？

讓我們從頭捋一下這個錯誤是怎么來的。首先第一次打開網站登錄的時候是沒有問題的，只有當我們退出登錄，重新登錄的時候，這段警告就來了。并且如果我們在重復登錄之前刷新一下瀏覽器然后再登錄，這種警告就不會出現了，很神奇是不是？

分析一下上面的情景：首先這個警告只會在用戶重新登錄的時候出現，登錄的時候我們做的唯一跟路由相關的事情就是動態添加路由，所以問題肯定出在 router.addRoutes(routes)這里，其次這里又分了兩種情況：有刷新和無刷新。在無刷新的情況下會報這個警告，有刷新就不會報這個警告。那么有刷新和無刷新有什么區別呢？

我們很容易就想到，當頁面刷新的時候，Vue實例會重新初始化，Vue實例初始化的過程中，掛載在它上面的Vue-Router,Store等內容也會重新初始化。而在不刷新的情況下，就不會重新初始化。

再想想，我們第一次登錄之后，通過addRoutes添加了權限路由routes到router上，假設我們這個權限routes中包括了dashboard,user,role三個路由，那么當我們退出登錄，然后重新登錄的時候，由于同一個用戶登錄，后端返回的權限列表是一樣的，生成的動態路由routes也是一樣的（即里面同樣包含了dashboard,user,role三個路由），那么此時再次添加這三個路由就導致router中掛載的routes重復。而在刷新的情況下，由于router重新初始化，只包含了初始化我們添加的不需要權限的路由，此時再次登錄，重新添加就不存在路由重復的問題了。

通過以上的分析，我們搞清了問題的來源，那么如何解決呢，很遺憾，vue-router并沒有刪除路由的api。根據以上的分析，我們很容易想到，通過強制刷新頁面的方式來重置router：即當用戶退出登錄的時候，通過js強制刷新一下頁面。就可以解決問題。這種方式雖然可以解決問題，但顯得不是很優雅，而且刷新頁面導致資源重新加載和頁面閃爍，體驗也不是特別好。因此有沒有在不刷新的情況下解決問題的辦法呢？

經過一番搜索，終于找到了一種方法，即重置當前router的match屬性：

router.js

// 定義一個函數來創建routerexport const createRouter = routes => new VueRouter({ mode: ’history’, base: process.env.BASE_URL, routes}); // 在使用addRoutes的地方// 重置當前router的match = 初始router.matchrouter.match = createRouter(constantRoutes).match;router.addRoutes(routes);

這樣就可以完美解決問題了。

總結：

整個解決的過程還是比較痛苦的，因為實際中我的代碼是比較復雜的，并不像上面簡化后那么簡單。

整個addRoutes是在store.dispatch中完成，并且中間還夾雜著生成動態路由，根據動態路由再生成用戶菜單等一系列功能，干擾比較大，并且這個是源碼報警，不好定位，只能通過console和瀏覽器調試，一步步縮小報錯范圍，最終找到問題原因。

然后再通過google，以及搜索vue-router倉庫的issue一步步找到解決方法。

所以想說，如果大家開發中遇到一些第三方依賴的問題，可以去搜索官方倉庫的issue，很好用的，很多問題其實issue中都有答案。我是屢試不爽。

最后，一定要用google，百度，浪費我好長時間，啥都沒找到~