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 从公开仓库中收录这些内容。

举报或申请下架