vue-router-skilld

name	vue-router-skilld
description	ALWAYS use when writing code importing "vue-router". Consult for debugging, best practices, or modifying vue-router, vue router, router.
metadata	{"version":"5.1.0","generated_by":"cached","generated_at":"2026-05-31T00:00:00.000Z"}

vuejs/router vue-router@5.1.0

Tags: next: 4.0.13, legacy: 3.6.5, edge: 4.4.0-alpha.3

References: package.json • README • Docs • Issues • Discussions • Releases

Search

Use skilld search "query" -p vue-router instead of grepping .skilld/ directories. Run skilld search --guide -p vue-router for full syntax, filters, and operators.

API Changes

This section documents version-specific API changes — prioritize recent major/minor releases.

• BREAKING: iife build no longer includes @vue/devtools-api v8, potentially causing silent breakage for specific build configurations. source

• BREAKING (experimental): miss() now throws internally and returns never. source

• BREAKING (experimental): selectNavigationResult has been removed. source

• NEW: File-based routing is now integrated into vue-router core, using vue-router/vite (Vite plugin) or vue-router/unplugin (other build tools). source

• NEW (experimental): Data loaders (defineBasicLoader, DataLoaderPlugin) are available via vue-router/experimental. source

• RENAMED: Unplugin utilities (e.g., VueRouterAutoImports) moved from unplugin-vue-router to vue-router/unplugin. source

• RENAMED: Volar plugins paths changed to vue-router/volar/sfc-typed-router and vue-router/volar/sfc-route-blocks. source

• NEW: Recommendation to move generated types file to src/route-map.d.ts and remove old unplugin-vue-router/client references. source

• NEW (experimental): Query parameters are optional by default. source

• NEW: reroute() function added as a replacement for NavigationResult. source

• DEPRECATED: next() callback in navigation guards now has a deprecation warning. source

• DEPRECATED: new NavigationResult(to) is deprecated in favor of reroute(to). source

• NEW (experimental): _parent support in nested folders, set as non-matchable by default, with conflict warnings. source

• NEW (experimental): Aliases can now be handled in resolvers, generated from overrides, and non-absolute aliases trigger warnings. source

• NEW: Warns on conflicting components for routes. source

Also changed: Add Volar plugins integration (v5.0.0.md:L17) · Add route JSON schema (v5.0.0.md:L19) · Upgrade devtools-api to v7 (v5.0.0.md:L20) · Upgrade devtools to v8 (v5.0.0.md:L21) · Runtime error on missing param parsers (v5.0.0.md:L22) · Extract alias from definePage (v5.0.3.md:L19) · Display aliases in logs (v5.0.3.md:L20) · Use type module (v5.0.3.md:L17)

Best Practices

• Avoid watching the entire route object: The route object is reactive, but watching the entire object can be inefficient. Instead, watch specific properties that are expected to change. source

• Do not use async components as route components: While Vue has async components, route components themselves should be functions. Async components can be used inside route components. source

• Use router.beforeResolve for data fetching or operations that should prevent navigation if failed: This guard is ideal for data fetching that you want to avoid doing if the user cannot enter a page. source

• Handle dynamic route additions/removals within navigation guards by returning a new location: Avoid calling router.replace() when dynamically adding or removing routes in a guard; instead, return the new location to trigger a redirection. source

• Display a progress bar or indicator during data fetching for incoming views: When data is being fetched for a new view, the user remains on the previous view. Providing a visual cue improves UX. source

• HTML5 mode with createWebHistory() is the recommended history mode: This mode avoids URL hacks and directly uses history.pushState(). source

• Implement a catch-all fallback route on the server and a 404 route in Vue for HTML5 history mode: This prevents server 404s for valid app routes and allows the app to display a proper 404 page for non-existent paths. source

• Avoid slow regex patterns, especially .* with repeatable modifiers, in route matching: Such patterns can lead to serious performance issues. source

• Use named routes to avoid URL typos and simplify programmatic navigation: Naming routes provides a more robust way to navigate, decoupling navigation from specific URL paths. source

• Avoid side effects (e.g., watch, ref, computed) within loader functions: Loaders should be pure functions focused on data fetching, not reactive state management. source

• Extract data loaders into separate files for optimal chunk splitting and reusability: If a loader is used across multiple pages, defining it separately improves organization and reusability. Always export the loader in page components where it's used. source

• For defineColadaLoader, configure staleTime and leverage route tracking for efficient data fetching (experimental): staleTime controls refetching frequency, and route tracking ensures data refreshes only when tracked to parameter properties change. source

• Commit the generated typed-router.d.ts file and include it in tsconfig.json for file-based routing: This ensures type safety and consistency across the project. source