vue-router-best-practices

Featured

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

Web & Frontend 5,052 stars 280 forks Updated 3 weeks ago MIT

Install

View on GitHub

Quality Score: 93/100

Stars 20%
100
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
63
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

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 next() function → See [router-navigation-guard-next-deprecated](reference/router-navigation-guard-next-deprecated.md) ### Route Lifecycle - Stale data when navigating between same route → See [router-param-change-no-lifecycle](reference/router-param-change-no-lifecycle.md) - Event listeners persisting after component unmounts → See [router-simple-routing-cleanup](reference/router-simple-routing-cleanup.md) ### Setup - Building production single-page application → See [router-use-vue-router-for-production](reference/router-use-vue-router-for-production.md)

Details

Author
antfu
Repository
antfu/skills
Created
3 months ago
Last Updated
3 weeks ago
Language
TypeScript
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

frontend-navigation

React Router v7 navigation - route definitions, SSR integration, auth guards, Link/Navigate patterns, layout nesting, and project conventions

27 Updated 1 months ago
aexol-studio
Web & Frontend Solid

clerk-vue-patterns

Vue 3 patterns with Clerk — composables (useAuth, useUser, useClerk, useOrganization), Vue Router guards, Pinia auth store integration. Triggers on: vue clerk, useAuth vue, clerk composables, vue router clerk guard, pinia auth clerk. For Nuxt, use clerk-nuxt-patterns instead.

43 Updated 5 days ago
clerk
Web & Frontend Featured

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

46,279 Updated today
CherryHQ
Code & Development Solid

coding-standards

Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.

116 Updated 6 days ago
cloudnative-co
Web & Frontend Solid

weapp-vite-vue-sfc-best-practices

面向使用 weapp-vite 的小程序项目的 Vue SFC 实践手册,覆盖 `<script setup lang="ts">`、JSON 宏、`definePageMeta`/layout、`defineModel`、`usingComponents`、模板指令兼容、`.weapp-vite` 类型支持文件、受管 `prepare` 工作流,以及和脚手架 `AGENTS.md` / 本地 `dist/docs` 对齐的当前 SFC 约定。

335 Updated today
weapp-vite