关于 vue-router-best-practices
为 Vue Router 开发者提供导航模式和常见问题的实用指导，涵盖导航守卫、路由生命周期行为及生产环境单页应用配置。
主要功能
- 01导航守卫模式
- 02异步守卫处理
- 03排查重定向循环
- 04路由参数生命周期
- 05组件卸载时清理
- 06生产环境单页应用配置
适用场景
- 01处理参数变化时的路由导航
- 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