[筆記] Vue Router & Vuex 合用解決動態路由和重新整理刷新問題

章節連結

Vue 的前端開發專案,若遇上要進行路徑的權限管理,這時候便讓單純的 Vue Router 添增了不少判斷條件和保存當前狀態。這邊筆記下利用 Vue-Router 和 Vuex 來解決動態路由和重新整理刷新問題,同時提點一些要注意的地方。
vue.js logo vue


所需套件


重點和邏輯

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”} 解决方案

按讚加入粉絲團

延伸閱讀