/

/vue-router-best-practices

@bc922e4 official

by hyf0hyf0/vue-skills2.9k stars

167

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

9 files
41.8 KB
MIT
Updated 8 months ago
GitHub
No alerts

Ask your Agent

Use this Skill: https://skilld.dev/gh/hyf0/vue-skills/vue-router-best-practices

This session only. Nothing lands on disk.

SKILL.md

1.5 KB raw

≈32 tokens always: the name and description. ≈320 when used: this file. ≈10k more on demand in 8 files.

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

Source: SKILL.md on GitHub

Third-party checks

No alerts16d5 checks · Risk SAFE

Gen Agent Trust Hub16d
This skill is a collection of educational documentation and best practices for using Vue Router 4. It contains no executable code, network operations, or sensitive data access, and is focused entirely on providing guidance for frontend development patterns.
Socket16d
No alerts
Snyk16d
Risk: LOW · No issues
Runlayer7mo
9 files scanned · No issues
ZeroLeaks5mo
Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at bc922e4. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 months ago.

Steadyupdated 8 months ago

Capability

version: 1.0.0
author: github.com/vuejs-ai

Topics

Vue
TypeScript
vue-router
navigation-guards
routing
lifecycle
spa

What it does

Teaches Vue Router 4 navigation guards, route lifecycle patterns, and common gotchas like stale data when params change and infinite redirect loops. Covers async/await in guards, beforeRouteEnter access patterns, and cleanup on component unmount.

Generated from the current SKILL.md.

Frequently asked

Does this cover Vue Router 3 or Vue Router 4?

This skill targets Vue Router 4 specifically. It covers patterns and navigation guards in Vue 4's composition API context.

What are the main topics covered?

Navigation guards (beforeRouteEnter, beforeEach, infinite loops, async patterns), route lifecycle gotchas (stale data, cleanup), and production single-page app setup.

Does this address the deprecated next() function?

Yes. The skill includes guidance on replacing deprecated next() callbacks with modern return-based patterns in Vue Router 4.

Will this help with same-route navigation issues?

Yes. It covers both navigating to the same route with different params and stale data problems when component lifecycle hooks don't trigger on param changes.

Generated from the current SKILL.md. These answers refresh after source changes.

/vue-router-best-practices