/

/vue-router-best-practices

@bc922e4 official

by Vue AIvuejs-ai/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/vuejs-ai/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 alerts17d5 checks · Risk SAFE

Gen Agent Trust Hub17d
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.
Socket17d
No alerts
Snyk17d
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
vue-router
navigation-guards
routing
lifecycle
spa

What it does

Teaches Vue Router 4 navigation guards, route lifecycle handling, and common patterns like preventing infinite redirects and managing stale data across param changes. Covers gotchas like component cleanup on navigation and the deprecated next() function.

Generated from the current SKILL.md.

Frequently asked

Does this skill cover Vue Router 4?

Yes. The skill is specific to Vue Router 4 patterns, navigation guards, route params, and component lifecycle interactions.

What are the main topics covered?

Navigation guards (async/await, infinite loops, deprecated next() function), route lifecycle issues (stale data, cleanup), and production SPA setup.

Does this address the problem of component data not updating when route params change?

Yes. The skill includes guidance on handling stale data when navigating between the same route with different params.

Does this cover how to access component instances in navigation guards?

Yes. It addresses the gotcha that `this` is not available in beforeRouteEnter guards and explains the workaround.

Does this skill help prevent infinite redirect loops?

Yes. It includes patterns for identifying and avoiding infinite navigation guard redirect loops.

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

/vue-router-best-practices