臺路由需求：根據使用者許可權獲取選單（也就是路由資訊），動態載入到路由當中，實現正常路由切換。

1、最開始的實現方式：使用者登入—>介面獲取當前使用者的選單資訊—>格式化選單資訊（格式化成，路由格式）—>使用router.addRoutes動態加入路由。
實現結果：路由新增成功，並且能正常的跳轉。但是，當我重新整理頁面後頁面路由出錯了，直接進入了錯誤頁面404。
問題原因：vue在初始化的時候，vue-router的例項物件已經生成了，當前路由只包含了如登入頁和404等靜態頁面，使用者許可權獲取的路由需要在登入成功後單獨請求許可權介面再動態新增到路由當中，所以頁面在重新整理的時候頁面會找不到對應動態的路由。

2、當前的問題在於重新整理後，vue和vue-router重新初始化會跳過許可權介面的請求和新增動態路由。
本人也卡在這個地方一下午，後面看了網上的處理方式和程式碼，也整理了一份適應自己專案的處理方式。

最終的思路：在路由的導航守衛router.beforeEach中判斷當前是頁面重新整理還是路由切換，利用vuex的狀態值在頁面重新整理就會重新初始化的特新和本地快取localStorage存的登入狀態值來判斷頁面重新整理還是路由切換。整體的實現方式如下:

最終的實現方式：
注意點：我在vuex中快取了使用者許可權的介面返回的資料，可以根據需要存放在本地還是vuex都是可以的

1、使用者登入—> 本地快取使用者token和id，vuex中存入登入使用者id（存的具體那個值,對還是錯都不重要，值只是用來判斷頁面重新整理還是路由切換，隨意存。。只是用於後續的判斷） —>介面獲取當前使用者的選單資訊—>格式化選單資訊（格式化成，路由格式）—>使用router.addRoutes動態加入路由

2、在導航守衛router.beforeEach的方法中，進入路由後，判斷 1、本地快取的token是否有值，沒有的話，說明使用者沒有登入過，直接跳轉登入頁面2、token值有的，vuex中的使用者id存在的話，頁面只是路由切換，用next讓路由正常流轉下去 2、token值有的，vuex中的使用者id的值不存在的話，說明頁面重新整理了，這個時候需要做兩個件事情，A：設定vuex中的id的為本地快取的使用者id ， B：重新請求許可權介面，格式化後，動態新增到路由，然後重新用next實現接下來的路由跳轉，這裡需要注意，請求的許可權介面需要用async/wait 改成同步介面方便使用。

步驟1具體程式碼如下圖所示，其中標的數字1標示的是：本地快取使用者token和id

步驟2的程式碼實現方式如下圖所示：其中標註的1是:判斷本地token的值，沒有token的話，直接跳轉登入頁面，
標註2是：token值有的，vuex中的使用者id存在的話，頁面只是路由切換，用next讓路由正常流轉下去 ，標註3：token值有的，vuex中的使用者id的值不存在的話，說明頁面重新整理了，這個時候需要做兩個件事情，A：設定vuex中的id的為本地快取的使用者id ， B：重新請求許可權介面，格式化後，動態新增到路由，然後重新用next實現接下來的路由跳轉

下圖是管理vuex中的欄目的，前面說了，可以更具使用情況，快取本地還是vuex中，只是存放的地方和路由的格式化，路由的格式化，需要根據需要自己格式化

總結：
1、vue專案在初始化後，vue-router的例項後生成的路由只包含靜態路由，就是那些寫死的路由
2、動態路由新增本人認為最核心的不是router.addRoutes，這個大家都會，是如何判斷當前頁面是路由切換還是頁面重新整理，上面已經說了思路，也有程式碼，可以多試試