vue-router-best-practices

The vue-router-best-practices skill provides guidance for working with Vue Router 4 in Vue applications. It focuses on common routing problems such as navigation guard behavior, route parameter changes, stale route data, redirect loops, and route-component lifecycle interactions. The skill helps users recognize routing patterns that can cause bugs or confusing behavior, especially when navigating between similar routes, handling asynchronous guard logic, or relying on lifecycle hooks that may not run as expected.

Its main capabilities are organized around navigation guards, route lifecycle behavior, and production setup guidance. It references patterns for handling same-route navigation with different parameters, using beforeRouteEnter correctly when component instances are unavailable, awaiting asynchronous API calls inside guards, avoiding infinite redirect loops, and avoiding deprecated guard patterns such as next(). It also covers lifecycle-related cleanup concerns, including stale data during param changes and event listeners that persist after component unmounting.

This skill is intended for Vue developers, frontend engineers, code reviewers, and technical teams building or maintaining applications that use Vue Router 4. It is especially useful when debugging routing issues, reviewing navigation guard logic, documenting best practices, or preparing a Vue single-page application for production. Its scope is limited to the Vue Router topics explicitly listed in the provided references and does not describe unrelated Vue APIs or additional router features.