关于 vue-router-best-practices
面向 Vue 应用开发者的 Vue Router 实践技能，按导航守卫、路由生命周期和生产环境配置整理建议，并指出常见问题。
主要功能
- 01导航守卫模式
- 02路由参数与生命周期指南
- 03清理持续存在的事件监听器
- 04生产环境 SPA 路由配置
适用场景
- 01排查重定向或守卫问题
- 02处理路由参数间的导航
- 03组件卸载后移除监听器
- 04为 SPA 配置 Vue Router
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/vue-router-best-practices确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
reference/router-beforeenter-no-param-trigger.mdrouter-beforerouteenter-no-this.mdrouter-guard-async-await-pattern.mdrouter-navigation-guard-infinite-loop.mdrouter-navigation-guard-next-deprecated.mdrouter-param-change-no-lifecycle.mdrouter-simple-routing-cleanup.mdrouter-use-vue-router-for-production.md详细介绍
Vue Router 的最佳实践、常见问题及导航模式。
导航守卫
- 在参数不同的同一路由之间导航 → 参见 router-beforeenter-no-param-trigger
- 在 beforeRouteEnter 守卫中访问组件实例 → 参见 router-beforerouteenter-no-this
- 导航守卫发起 API 调用但未等待其完成 → 参见 router-guard-async-await-pattern
- 用户陷入无限重定向循环 → 参见 router-navigation-guard-infinite-loop
- 导航守卫使用已弃用的 next() 函数 → 参见 router-navigation-guard-next-deprecated
路由生命周期
- 在同一路由之间导航时数据过期 → 参见 router-param-change-no-lifecycle
- 组件卸载后事件监听器仍然存在 → 参见 router-simple-routing-cleanup
设置
- 构建用于生产环境的单页应用 → 参见 router-use-vue-router-for-production
评论
支持 Markdown