关于 vue-router-best-practices
面向 Vue Router 项目的实践指南，汇总导航守卫、路由生命周期与生产环境设置中的常见问题及处理模式。
主要功能
- 01导航守卫常见问题
- 02路由参数变化处理
- 03组件卸载时清理监听器
- 04生产环境单页应用设置
适用场景
- 01排查相同路由参数变化未触发导航的问题
- 02避免守卫异步调用与无限重定向
- 03清理路由组件卸载后的事件监听器
安装
复制下面的命令，在终端中运行。
$
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