vue-router-best-practices

仓库创建 2026年1月28日最近提交 1 个月前SkillHot 收录 22 天前

▸ 精选理由

解决路由参数、守卫与生命周期的常见问题

这个 Skill 做什么

Vue Router 4 使用模式与导航守卫等最佳实践集合，解决常见路由陷阱。

教你用好 Vue Router 4 的路由和导航守卫，处理 params、嵌套路由和组件生命周期的常见坑，比如同一路由不同参数不触发守卫的情况。做页面跳转控制、权限守卫或调试路由生命周期时会常用。特点是把零散的陷阱和推荐模式汇总成易用的做法，省去反复踩坑。

▸ 展开 SKILL.md 英文原文

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

开发编程路由导航守卫Vue Router通用

5.7k

Stars

313

Forks

仓库内 Skill

+188

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

Vue Router best practices, common gotchas, and navigation patterns.

### Navigation Guards
- Navigating between same route with different params → See [router-beforeenter-no-param-trigger](reference/router-beforeenter-no-param-trigger.md)
- Accessing component instance in beforeRouteEnter guard → See [router-beforerouteenter-no-this](reference/router-beforerouteenter-no-this.md)
- Navigation guard making API calls without awaiting → See [router-guard-async-await-pattern](reference/router-guard-async-await-pattern.md)
- Users trapped in infinite redirect loops → See [router-navigation-guard-infinite-loop](reference/router-navigation-guard-infinite-loop.md)
- Navigation guard using deprecated

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有