关于 vue-router-best-practices
介绍 Vue Router 推荐实践、导航模式和常见问题的技能，帮助 Vue 开发者处理导航守卫、路由生命周期及生产环境配置。
主要功能
- 01导航守卫模式
- 02路由参数变化处理
- 03生命周期与清理建议
- 04生产级 SPA 配置
适用场景
- 01避免导航重定向循环
- 02在路由参数变化时更新数据
- 03在卸载时清理监听器
- 04配置生产环境 Vue SPA
安装
复制下面的命令，在终端中运行。
$
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