Vue Router Best Practices
SkillVue Router 4 best practices and gotchas: guards and lifecycle hooks not firing when only params change, no this in beforeRouteEnter, async calls and infinite redirect loops in guards, the deprecated next() callback, and cleaning up listeners after unmount.
name: vue-router-best-practices
description: "Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions."
version: 1.0.0
license: MIT
author: github.com/vuejs-ai
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
Ähnliche Ressourcen
Nuxt
SkillReference for Nuxt 5, the full-stack Vue framework: directory layout, file-based routing, useFetch, auto-imports, server routes, rendering modes, SSR and hydration pitfalls, modules and layers, with notes on the move to Nitro v3 and Vite 8. Generated by Anthony Fu from the official docs.
antfu/skills6kPinia
SkillReference for Pinia v4, Vue's official state library: defining stores with state, getters and actions, plugins, composables, composing stores, testing with @pinia/testing, SSR, Nuxt and HMR. Recommends setup stores and storeToRefs. Generated by Anthony Fu from the official docs.
antfu/skills6kVitePress
SkillReference for VitePress 2, the Vite and Vue static site generator for docs: file routing, Markdown extensions and Vue in Markdown, data loaders, dynamic routes, theme config and custom themes, i18n, SSR compatibility and deployment. Generated by Anthony Fu from the official docs.
antfu/skills6kVue
SkillReference for Vue 3.5: script setup and macros such as defineProps, defineEmits and defineModel, reactivity, watchers and lifecycle, and built-ins like Transition, Teleport, Suspense and KeepAlive. Prefers the Composition API with TypeScript. Generated by Anthony Fu from the official docs.
antfu/skills6kCreate Adaptable Composable
SkillGuides the agent in writing library-grade Vue composables whose inputs accept a plain value, ref or getter: choose MaybeRefOrGetter or MaybeRef depending on whether the input is read-only or writable, and normalize with toValue() and toRef() inside watchers. Requires Vue 3 or Nuxt 3+.
vuejs-ai/skills2.9kVue Best Practices
SkillDefault workflow for Vue work: standardizes on Vue 3, the Composition API and script setup with TypeScript, reads core references on reactivity, SFCs, data flow and composables, plans component boundaries first, loads topics like slots, transitions and performance only when needed, then self-checks.
vuejs-ai/skills2.9k