Provides guidance on Vue Router 4 patterns and common routing pitfalls.
Install
mkdir -p .claude/skills/vue-router-best-practices && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1896" && unzip -o skill.zip -d .claude/skills/vue-router-best-practices && rm skill.zipInstalls to .claude/skills/vue-router-best-practices
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.Key capabilities
- →Implement navigation guards for route transitions
- →Manage route parameters and lifecycle hooks
- →Handle async navigation patterns
- →Clean up event listeners on component unmount
How it works
The skill provides architectural patterns and reference solutions for common Vue Router 4 challenges, such as infinite loops or stale data during navigation.
Inputs & outputs
When to use vue-router-best-practices
- →Debugging navigation guards
- →Optimizing route params
- →Fixing routing lifecycle issues
About this skill
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
When not to use it
- →When using Vue Router versions prior to 4
Limitations
- →Focuses exclusively on Vue Router 4 patterns
How it compares
It offers standardized, vetted solutions for complex routing lifecycle issues rather than relying on trial-and-error debugging.
Compared to similar skills
vue-router-best-practices side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vue-router-best-practices (this skill) | 3 | 5mo | No flags | Advanced |
| vue-best-practices | 19 | 5mo | No flags | Intermediate |
| vue-testing-best-practices | 5 | 6mo | No flags | Intermediate |
| vue-debug-guides | 4 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by antfu
View all by antfu →You might also like
vue-best-practices
antfu
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
vue-testing-best-practices
vuejs-ai
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.
vue-debug-guides
vuejs-ai
Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.
vueuse
onmax
Use when working with VueUse composables - provides reactive utilities for state, browser APIs, sensors, network, animations. Check VueUse before writing custom composables - most patterns already implemented.
frontend-vue-development
TencentBlueKing
前端 Vue 开发规范，涵盖 Vue 2/3 组件开发、Vuex 状态管理、路由配置、组件通信、样式规范、国际化。当用户进行前端开发、编写 Vue 组件、处理状态管理或实现页面交互时使用。
reka-ui
onmax
Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.