Agent Skills
› NeverSight/learn-skills.dev
› vue-router-best-practices
vue-router-best-practices
GitHub提供Vue Router 4的最佳实践、常见陷阱及导航模式，涵盖导航守卫（如参数变化、异步处理、无限循环）、路由生命周期管理（如数据刷新、清理监听器）及生产环境配置。
Trigger Scenarios
Vue Router导航守卫相关问题
路由参数变化导致的数据陈旧问题
组件卸载后的事件监听器清理
Vue SPA生产环境路由配置
Install
npx skills add NeverSight/learn-skills.dev --skill vue-router-best-practices -g -y
SKILL.md
Frontmatter
{
"name": "vue-router-best-practices",
"author": "github.com\/vuejs-ai",
"license": "MIT",
"version": "1.0.0",
"description": "Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions."
}
Vue Router best practices, common gotchas, and navigation patterns.
Navigation Guards
- Navigating between same route with different params → See router-beforeenter-no-param-trigger
- Accessing component instance in beforeRouteEnter guard → See router-beforerouteenter-no-this
- Navigation guard making API calls without awaiting → See router-guard-async-await-pattern
- Users trapped in infinite redirect loops → See router-navigation-guard-infinite-loop
- Navigation guard using deprecated next() function → See router-navigation-guard-next-deprecated
Route Lifecycle
- Stale data when navigating between same route → See router-param-change-no-lifecycle
- Event listeners persisting after component unmounts → See router-simple-routing-cleanup
Setup
- Building production single-page application → See router-use-vue-router-for-production
Version History
- e0220ca Current 2026-07-05 20:29
