Vue 的前端開發專案，若遇上要進行路徑的權限管理，這時候便讓單純的 Vue Router 添增了不少判斷條件和保存當前狀態。這邊筆記下利用 Vue-Router 和 Vuex 來解決動態路由和重新整理刷新問題，同時提點一些要注意的地方。
所需套件
重點和邏輯
1. Vue Router 有額外新增路由的方法 – router.addRoute。router.addRoutes 已經棄用，若你有一個以上的路由要新增，你可以跑 forEach 來解決
2. Vue Router 執行 router.addRoute 時，會中斷現有的 next() 的功能，造成後續的跳轉錯誤。
3. 檢查位置是在 router.beforeEach() 函式中
4. next() 不帶參數時，會解開 hook 往下運行，因此只會執行一次 Navigation Guard
5. next({…}) 有參數，會放棄該次 navigation 進行重新導向 ( redirect )
6. 綜合 3. 和 4. 兩點，你必須要每個路徑無論有無重新導向，最終有個 next() 的出口，否則就跳不出迴圈
7. vuex 內需要儲存當下動態路由頁面的 Object，記得要用 cloneDeep 深拷貝，否則會出現 Reference 錯誤
8. vuex-persistedstate 需要保存 vuex 中動態路由頁面的 Object 所存的變數
9. 當第一次載入頁面 ( 如 Login 頁面，F5 重新載入、新開分頁…等 )，都會重新拉取一次動態路由。
- 若 vuex 中沒有儲存先前動態路由頁面的內容，或是在同個 Tab 進行切換，那就視同一般頁面跳轉
- 若 vuex 中有儲存先前動態路由頁面的內容，但採用「新開 Tab」的方式開啟連結，那就以新開分頁中的網址與比對到的動態路由來當作終點，並帶上原有網址列中的參數，再藉由 next({…to, replace:true}) 的方式重新導向。
- 若使用者重新整理頁面，一樣會透過網址列來比對動態路由來當作終點，再藉由 next({…to, replace:true}) 的方式重新導向
10. 在 Login 頁面觸發跳轉到首頁，不免俗的會發生跳轉到兩次相同頁面的情形 ( 要跳轉到首頁→拉取動態路由載入→藉由 next(‘首頁’) 避免 navigation cancelled error → 再導向一次首頁 )。這樣一來，依照 Vue Router 原先的設定是會報錯的，於是便修改原本 Vue Router 中的 push 方法，將其 error 給隱藏。
11. 當使用者因為沒有登入被自動導到登入頁時，會將之前的網址記錄下來。接著當使用者完成登入，在要載入首頁之前做檢查。如果有先前的網址，那就將 next 的導向做轉換。
12. 當多 Tabs 開啟並在其中一頁執行登出後，由於其他 Tab 狀態不會同步，在每次登入、登出動作後要額外取一個 key 來記錄。當這個 key 為 true 的時候，那麼就在該 tab 執行 logout 動作，並修改原先預設的登入狀態。
程式碼
參考資料
1. vue动态增加路由addRoute
2. vue-router 报错：Navigation cancelled from“/…“ to “/…“ with a new navigation.
3. [Vue] Vue Router 使用 Navigation Guard 加入查詢參數
4. Vue動態路由配置
5. vue router 报错： Uncaught (in promise) NavigationDuplicate{_name: “NavigationDuplicated”} 解决方案
