Vue Router Best Practices

作者 vuejs-aic9d355ff23f6MIT收錄於 2026年10月8日更新於 2026年10月8日

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

AI 產生的概覽

關於 Vue Router 4 導覽守衛、路由參數與路由元件生命週期常見問題的參考指引。

功能
此技能是一份僅含說明的參考資料,指向八個主題檔案,涵蓋 Vue Router 4 的模式與常見陷阱。內容分為導覽守衛、路由生命週期與設定三部分,每個問題都連結到專屬的參考文件。它不產出檔案或程式碼成品,只是把代理引導到與特定路由問題相關的參考資料。
適用情境
在處理 Vue Router 4 程式碼並遇到守衛在參數變更時未觸發、使用已棄用的 next()、重新導向無窮迴圈、資料過期或事件監聽器清理等問題時使用。也適用於為正式環境單頁應用程式設定路由的情境。
執行需求
不需要任何工具、套件或憑證;不附帶指令碼,只需能讀取隨附的參考 markdown 檔案。

Vue Router best practices, common gotchas, and navigation patterns.

Navigation Guards

  • Navigating between same route with different params → See router-beforeenter-no-param-trigger [blocked]
  • Accessing component instance in beforeRouteEnter guard → See router-beforerouteenter-no-this [blocked]
  • Navigation guard making API calls without awaiting → See router-guard-async-await-pattern [blocked]
  • Users trapped in infinite redirect loops → See router-navigation-guard-infinite-loop [blocked]
  • Navigation guard using deprecated next() function → See router-navigation-guard-next-deprecated [blocked]

Route Lifecycle

  • Stale data when navigating between same route → See router-param-change-no-lifecycle [blocked]
  • Event listeners persisting after component unmounts → See router-simple-routing-cleanup [blocked]

Setup

  • Building production single-page application → See router-use-vue-router-for-production [blocked]

來源與署名

來源:vuejs-ai/skills位於skills/vue-router-best-practices提交c9d355f

授權條款: MIT

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架