Vue Router Best Practices
antfu/skills4.1k
This skill provides best practices, patterns, and solutions for using Vue Router 4, focusing on navigation guards, route lifecycle management, and production setup. It covers common challenges such as handling route parameters, preventing infinite redirects, and cleaning up event listeners, making it ideal for Vue.js developers seeking to optimize navigation and routing in their applications. The comprehensive guidance helps ensure robust, efficient routing implementation in Vue projects.
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
GitHub Owner
Owner: antfu
GitHub Links
- Twitter: https://twitter.com/antfu7
- YouTube: https://www.youtube.com/c/AnthonyFu7
- Instagram: https://www.instagram.com/antfu7
Files
router-beforeenter-no-param-trigger
router-beforerouteenter-no-this
router-guard-async-await-pattern
router-navigation-guard-infinite-loop
router-navigation-guard-next-deprecated
router-param-change-no-lifecycle
router-simple-routing-cleanup
router-use-vue-router-for-production
SKILL.md
name: vue-router-best-practices description: "Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions." version: 1.0.0 license: MIT author: github.com/vuejs-ai
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