AGENT SKILL

vue-router-best-practices

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

01 前言 Front Matter

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.

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

Stale data when navigating between same route → See router-param-change-no-lifecycle
Event listeners persisting after component unmounts → See router-simple-routing-cleanup

Building production single-page application → See router-use-vue-router-for-production

层级 AGENTS.md / README.md：init、update、audit、reorganize、trim。初始化 Agent 指令、代码改动后同步文档、检查文档漂移、重组仓库文档层级、精简规则与 Skills。 Not for 写业务代码或生成文档站点。

Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.

Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.

Pinia stores, state management patterns, store setup, and reactivity with stores.

Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only.

JSX syntax in Vue (e.g., class vs className, JSX plugin config).