关于 vue-router-best-practices
面向 Vue Router 的导航与路由生命周期实践参考，帮助 Vue 开发者识别常见问题并采用相应模式。
主要功能
- 01导航守卫模式
- 02路由参数变化行为
- 03生命周期与监听器清理
- 04生产环境 SPA 配置
适用场景
- 01排查守卫未等待 API 调用
- 02避免重定向循环
- 03路由参数变化后刷新数据
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/vue-router-best-practices确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
LICENSE.mdSYNC.mdreference/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