vue-router-best-practices

vue-router-best-practices 技能總覽

vue-router-best-practices 能幫你解決什麼

vue-router-best-practices 是一份聚焦在 Vue Router 4 的排錯與實作指南，特別針對 navigation guards、route param 變更，以及 route component 生命週期行為。當你的專案已經在使用 Vue 3 + Vue Router，而且你需要的是能快速落地的正確做法，而不是泛泛而談的框架建議時，這個技能特別有用。

哪些人適合安裝這個技能

這個技能很適合以下前端開發者：

• 正在上線需要登入驗證或權限控管的路由
• 只在 route params 改變時，正在排查資料殘留或畫面未更新問題
• 正在遷移仍使用 next() 的舊版 guard 程式碼
• 想避免 redirect loop 與不易察覺的 routing bug

如果你實際上的工作目標是「讓正式環境中的 routing 安全又可預期」，那這個技能會比一般泛用 Vue 提示更適合。

為什麼這個技能和一般提示不一樣

vue-router-best-practices 的價值在於，它聚焦在一小組高影響、而且經常真的把正式專案搞壞的 Vue Router 問題：

• beforeEnter 在 param 或 query 更新時不會觸發
• beforeRouteEnter 拿不到 this
• async guard 邏輯看似有寫，實際上卻沒有真正阻擋導航
• 全域 guard 造成無限重導
• route params 改變時，component state 殘留不更新
• Vue Router 4 中仍沿用過時的 next() 寫法

因此它特別適合拿來做 bug 修復、code review，以及升級／遷移工作。

它不打算涵蓋哪些內容

這不是完整的 Vue Router 課程、routing API 參考手冊，也不是涵蓋所有 router mode 的架構指南。這個技能刻意保持聚焦：它要處理的是會直接影響真實導航行為的實務正確性問題。

如何使用 vue-router-best-practices 技能

vue-router-best-practices 的安裝與使用情境

建議在 AI coding workflow 中使用 vue-router-best-practices，並讓模型能檢查你的 router config、route components 與 guard 邏輯。這個技能位於 vuejs-ai/skills repository 的 skills/vue-router-best-practices：

• SKILL.md
• reference/router-beforeenter-no-param-trigger.md
• reference/router-beforerouteenter-no-this.md
• reference/router-guard-async-await-pattern.md
• reference/router-navigation-guard-infinite-loop.md
• reference/router-navigation-guard-next-deprecated.md
• reference/router-param-change-no-lifecycle.md
• reference/router-simple-routing-cleanup.md
• reference/router-use-vue-router-for-production.md

如果你的平台支援 skill installation，就照該平台平常的 add/import 流程加入這個 repo，之後指定使用 vue-router-best-practices 即可。

下提示前先讀這幾個檔案

如果想最快掌握重點，建議依這個順序閱讀：

1. SKILL.md
2. reference/router-navigation-guard-next-deprecated.md
3. reference/router-navigation-guard-infinite-loop.md
4. reference/router-param-change-no-lifecycle.md
5. reference/router-beforeenter-no-param-trigger.md

這條閱讀路徑會先把風險最高的錯誤攤開來看：guard 控制流程失效、redirect loop，以及 route 驅動資料殘留。

這個技能需要什麼輸入

vue-router-best-practices skill 在你提供具體 routing 程式碼時效果最好，不要只給症狀描述。理想輸入包括：

• router/index.ts 或 router.ts
• 帶有 meta 的 route records
• 像 beforeEach 這類全域 guards
• component 內的 guards
• 由動態路由渲染的 components，例如 /users/:id
• 一段簡短重現：預期的導航行為是什麼、現在實際發生了什麼

如果沒有程式碼，輸出就會更泛、更難信任。

把模糊問題改寫成有效提示

弱提示：

• 「My Vue Router is buggy. Help.」

強提示：

• 「Use vue-router-best-practices to review this Vue Router 4 setup. When navigating from /orders/1 to /orders/2, access checks do not rerun and stale order data remains visible. We use a route-level beforeEnter, an async beforeEach, and onMounted in OrderDetail.vue. Identify the bug sources, explain which Vue Router behaviors are causing them, and rewrite the guards and component logic using Vue Router 4 return-based patterns.」

這種寫法能讓模型有足夠結構去對應正確的 reference file，並產出能實際使用的修正方案。

vue-router-best-practices 的最佳使用流程

一個實用流程如下：

1. 貼上失敗的 route config 與 guard 程式碼。
2. 描述出錯的精確導航路徑。
3. 要求模型把問題對應到某個已知 gotcha。
4. 請它提供修正後的實作。
5. 再要求一份簡短測試清單，涵蓋直接進入、同一路由 param 變更、redirect，以及未授權存取。

這種流程比抽象地問「best practices」更有效，因為大多數 Vue Router bug 都高度依賴具體情境。

哪些使用情境最能發揮這個技能

最適合 vue-router-best-practices usage 的情境包括：

• auth 與角色權限路由
• 由 route param 驅動的 detail 頁面
• Vue Router 3 升到 4 的清理與重構
• 排查被重用的 component instance
• 替換脆弱的 next() 控制流程
• 檢查 guard 邏輯應該放在全域、per-route，還是 component 內

這個技能能幫你修正的常見模式

你可以預期這個技能會協助你在以下選項間做出判斷：

• beforeEach vs beforeEnter vs onBeforeRouteUpdate
• watch(() => route.params.id) vs 用 :key 強制 remount
• return-based guards vs 已淘汰的 next()
• component-level fetching vs guard-level prechecks
• 正式環境應使用 Vue Router，還是簡單的 hash routing

這些都是真正的實作取捨，不只是程式風格建議。

提升輸出品質的實用提示範本

想得到更好的 vue-router-best-practices guide 結果，可以使用這個範本：

• 「Use vue-router-best-practices on this Vue 3 app.」
• 「Environment: Vue 3, Vue Router 4, Composition API.」
• 「Problem: [describe exact navigation bug].」
• 「Expected behavior: [what should happen].」
• 「Current behavior: [what actually happens].」
• 「Files: [paste router config and affected component].」
• 「Please: identify the Vue Router gotcha, explain why it happens, propose the safest fix, and include edge cases to test.」

哪些資訊能明顯提升結果品質

如果你有以下資訊，請一併提供給模型：

• route 改變的是 path，還是只有 params/query
• component 是否會在不同 ID 間被重用
• auth 是同步判斷，還是依賴 API
• 你使用的是 Options API 還是 Composition API
• 現有程式碼是否仍依賴 next()

這些細節會直接決定應套用哪種 vue-router-best-practices install 與使用建議。

vue-router-best-practices 技能 FAQ

vue-router-best-practices 適合初學者嗎

適合，前提是你已經懂基本 Vue，現在需要處理那些不直覺的 routing 行為。它不是從零開始、一步一步教學的 Vue Router 入門，但對於常見正式環境錯誤來說，對初學者仍相當友善，因為參考內容都是圍繞具體 bug 與修正方式展開。

什麼時候該用它，而不是一般 coding prompt

當問題牽涉到 route transition、guard 時機、被重用的 route components，或 redirect 行為時，就該用 vue-router-best-practices。一般 prompt 也許會給出看似合理的程式碼，但這個技能更有機會抓到 Vue Router 特有的 edge cases，例如只有 param 改變時，beforeEnter 不會重新觸發。

這個技能是專門處理 Vue Router 4 嗎

是。原始內容明確聚焦在 Vue Router 4 的實作模式，包括從已淘汰的 next() 風格遷移到 return-based guards。

它最能幫你避免哪些風險

它最有價值的預防點包括：

• guards 沒有重新執行，導致未授權存取
• param 變更後頁面資料殘留
• async navigation checks 卡住或觸發時機錯誤
• 無限 redirect loop
• 對 beforeRouteEnter 生命週期行為的誤解

什麼情況下這個技能不適合

如果你的問題主要是以下類型，就不建議用這個技能：

• 帶有 framework-specific abstraction 的 SSR routing
• 與導航無關的一般 Vue component 架構問題
• 想從最底層概念開始學完整 routing 教學
• 非 Vue 的前端 routing libraries

它是一個聚焦型的 vue-router-best-practices for Frontend Development 技能，不是萬用 routing 手冊。

如何改善 vue-router-best-practices 的使用效果

提供導航情境，不要只丟程式碼

如果想讓 vue-router-best-practices 產出更準確，請描述清楚實際 route transition：

• 從哪個 URL
• 到哪個 URL
• 是否只有 params/query 改變
• 使用者應該被 redirect、blocked，還是 allowed

這很重要，因為很多 Vue Router bug 只會出現在某一條特定導航路徑上。

同時提供 router 與 component 程式碼

常見失誤是只診斷到一半。例如 route guard 可能本身沒問題，但 component 仍依賴 onMounted，結果從 /users/1 切到 /users/2 後畫面還是顯示舊資料。把兩個檔案都提供出來，技能才能把 guard 邏輯和 component 生命週期行為連起來判斷。

不只要求修正，也要要求做出判斷

更好的提示方式：

• 「Should this logic live in beforeEach, beforeEnter, onBeforeRouteUpdate, or a watch, and why?」

這種問法通常會比單純說「fix this bug」得到更強的結果，因為這個技能特別擅長幫你判斷該把邏輯放在哪一層 routing。

留意這些常見失敗模式

拿到第一版輸出後，優先檢查以下問題：

• 修正方案是否仍假設 beforeEnter 會在 param 變更時觸發
• 解法是否混用了 next() 與 return-based patterns
• auth redirect 是否仍可能導回目前路由
• async checks 是否只有 await，卻沒處理 errors/timeouts
• 為了解 stale data 而強制 remount，但其實用較輕量的 watch 就足夠

套用修補後，要求一份測試清單

一個很好的改善步驟是：

• 「Now give me a minimal test checklist for direct visit, authenticated visit, unauthenticated redirect, same-route param change, query change, and invalid ID.」

這對 vue-router-best-practices skill 的使用特別重要，因為很多 routing bug 都是在初始 happy path 看起來正常之後才冒出來。

把 references 當成定向複核工具

拿到第一版答案後，可以再要求模型根據最相關的 reference 做一次驗證：

• router-beforeenter-no-param-trigger.md
• router-navigation-guard-infinite-loop.md
• router-param-change-no-lifecycle.md

這第二輪檢查常能抓出細微錯誤，也能在你修改正式環境 routing code 之前提高把握度。