vue-router-best-practices

vue-router-best-practices skill 概览

vue-router-best-practices 能解决什么问题

vue-router-best-practices skill 是一份聚焦 Vue Router 4 的排错与实现指南，尤其适合处理导航守卫、路由参数变化，以及路由组件生命周期行为相关的问题。如果你的应用已经在使用 Vue 3 + Vue Router，并且你需要的是能快速落地的正确做法，而不是泛泛的框架建议，这个 skill 会非常有用。

谁适合安装这个 skill

这个 skill 很适合以下前端开发者：

• 正在交付需要登录验证或权限控制的路由
• 在排查仅路由参数变化时出现的陈旧数据问题
• 在迁移仍然依赖 next() 的旧守卫代码
• 想避免重定向死循环和静默路由 bug

如果你的真实需求是“让生产环境里的路由行为安全、可预期”，那它会比宽泛的 Vue 提示词更合适。

为什么这个 skill 和通用提示词不一样

vue-router-best-practices 的价值在于，它把注意力集中在一小组高影响、且经常会把真实应用弄坏的 Vue Router 关键坑点上：

• beforeEnter 在参数或 query 更新时不会触发
• beforeRouteEnter 中无法访问 this
• 异步守卫逻辑实际上没有真正阻塞导航
• 全局守卫里出现无限重定向
• 路由参数变化后组件状态仍然陈旧
• Vue Router 4 中仍在使用过时的 next() 写法

因此，这个 skill 特别适合用于修 bug、做代码审查，以及处理迁移工作。

它不打算覆盖什么

这不是一门完整的 Vue Router 教程，也不是路由 API 参考手册，更不是覆盖所有 router mode 的架构指南。这个 skill 的设计就是保持聚焦：专门帮助你处理那些会直接影响真实导航行为的实用正确性问题。

如何使用 vue-router-best-practices skill

vue-router-best-practices 的安装上下文

建议在 AI 编码工作流中使用 vue-router-best-practices，前提是模型可以查看你的 router 配置、路由组件和守卫逻辑。这个 skill 位于 vuejs-ai/skills 仓库的 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，就按平台常规的 add/import 流程导入该仓库，然后指定使用 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

这条阅读路径会优先暴露风险最高的错误：守卫控制流失效、重定向死循环，以及由路由驱动的数据陈旧问题。

这个 skill 需要什么输入

vue-router-best-practices skill 在你提供具体路由代码时效果最好，而不只是描述症状。高质量输入通常包括：

• router/index.ts 或 router.ts
• 带有 meta 的 route records
• 像 beforeEach 这样的全局守卫
• 组件内守卫
• 由动态路由渲染的组件，例如 /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.”

这种写法能给模型足够的结构信息，让它匹配正确的参考文件，并产出可直接使用的修复方案。

使用 vue-router-best-practices 的最佳工作流

一个实用的工作流如下：

1. 贴出出问题的路由配置和守卫代码。
2. 说明具体是哪一条导航路径失败了。
3. 让模型把你的问题映射到某个已知坑点上。
4. 要求给出修正后的实现。
5. 再让模型提供一个简短测试清单，覆盖直接访问、同一路由参数变化、重定向和未授权访问等情况。

相比抽象地询问“best practices”，这种工作流更有效，因为大多数 Vue Router bug 都强依赖具体场景。

这个 skill 最擅长的使用场景

最适合使用 vue-router-best-practices 的场景包括：

• 登录鉴权和基于角色的路由控制
• 由 route params 驱动的详情页
• 从 Vue Router 3 到 4 的清理与迁移
• 排查被复用组件实例带来的问题
• 替换脆弱的 next() 控制流
• 评审某段守卫逻辑更适合放在全局、单路由，还是组件内

这个 skill 能纠正的常见模式

你可以期待它帮助你在以下方案间做出判断：

• beforeEach、beforeEnter 和 onBeforeRouteUpdate 该用哪个
• 用 watch(() => route.params.id) 还是通过 :key 强制重新挂载
• 用 return-based guards 还是继续使用已过时的 next()
• 数据获取应该放在组件层，还是放在守卫层先做前置检查
• 生产环境应用应该用 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.”

这样的提示词能让模型更容易给出针对性强、可执行的答案。

能明显提升结果质量的小技巧

如果你有下面这些信息，尽量一起提供给模型：

• 路由变化是 path 变了，还是只有 params/query 变了
• 组件是否会在不同 ID 之间被复用
• 鉴权是同步判断，还是依赖 API
• 你使用的是 Options API 还是 Composition API
• 代码是否仍依赖 next()

这些细节会直接决定该采用哪种 vue-router-best-practices install 与使用建议。

vue-router-best-practices skill 常见问题

vue-router-best-practices 适合初学者吗

适合，前提是你已经了解基本的 Vue，并且现在需要处理那些不那么直观的路由行为问题。它不是一步一步带你入门 Vue Router 的教程，但对于常见的生产环境错误来说，对初学者依然友好，因为参考内容都是围绕具体 bug 和修复方式组织的。

什么时候应该用它，而不是普通编码提示词

当问题涉及路由跳转、守卫触发时机、被复用的路由组件或重定向行为时，就应该优先使用 vue-router-best-practices。普通提示词也许能给出“看起来合理”的代码，但这个 skill 更有机会发现 Vue Router 特有的边界情况，比如仅参数变化的导航不会重新触发 beforeEnter。

这个 skill 是否专门覆盖 Vue Router 4

是的。源材料明确面向 Vue Router 4 的实践方式，包括从已弃用的 next() 风格迁移到基于返回值的守卫写法。

它主要帮助避免哪些高风险问题

它最有价值的预防点包括：

• 守卫未重新执行导致的未授权访问
• 参数变化后页面数据仍然陈旧
• 异步导航检查卡住或触发异常
• 无限重定向循环
• 对 beforeRouteEnter 生命周期行为的误解

什么情况下这个 skill 不适合

如果你的问题主要是以下方向，就不建议用这个 skill：

• 带有框架特定抽象的 SSR 路由
• 与导航无关的一般 Vue 组件架构问题
• 想从零开始系统学习完整路由教程
• 非 Vue 的前端路由库

它是一个面向前端开发的定向型 vue-router-best-practices skill，不是通用路由手册。

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

提供导航场景，而不只是贴代码

想让 vue-router-best-practices 产出更好结果，要把具体路由切换场景描述清楚：

• 从哪个 URL 出发
• 跳到哪个 URL
• 是否只是 params/query 发生变化
• 用户应该被重定向、阻止，还是允许通过

这很关键，因为很多 Vue Router bug 只会在某一条导航路径上暴露出来。

同时提供 router 和组件代码

一个高频失败模式是只诊断到一半问题。比如，路由守卫本身可能没错，但组件依然依赖 onMounted，于是从 /users/1 切到 /users/2 后仍然显示旧数据。把两边文件一起提供，skill 才能把守卫逻辑和组件生命周期行为串起来分析。

不只问怎么修，还要让它帮你做决策

更好的提示词是：

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

这会比单纯说“fix this bug”产出更强，因为这个 skill 特别擅长帮助你判断正确的路由层次应该放在哪里。

重点检查这些常见失败模式

拿到第一版输出后，最值得复查的是：

• 修复方案是否仍默认 beforeEnter 会在参数变化时触发
• 方案里是否把 next() 和 return-based patterns 混用
• 鉴权重定向是否仍可能跳回当前路由
• 异步检查虽然 await 了，但错误和超时是否没有处理
• 为了解决陈旧数据而强制 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 的使用尤其重要，因为很多路由 bug 都是在“首次 happy path 已经跑通”之后才暴露出来的。

把参考文件当作定向复查工具使用

拿到第一轮答案后，可以继续让模型对照最相关的参考文件再做一次校验：

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

这一轮复查经常能发现一些细微错误，在你修改生产环境路由代码前进一步提高把握。