Dynamic routing priority adjustment

Dynamic route priority adjustment is a core technique in Vue.js routing configuration. Properly setting the route matching order can effectively avoid path conflicts and unintended redirects. Below, we delve into practical scenarios to explain how to optimize matching logic by adjusting route definition order and using the pathRanker algorithm.

Basic Principles of Route Matching

Vue Router adopts a first-come, first-served matching strategy. When multiple similar paths are defined, the earlier-defined route takes precedence. Consider the following route configuration:

const routes = [
  { path: '/user/:id', component: UserDetail },
  { path: '/user/create', component: UserCreate }
]

In this case, accessing /user/create will match the :id pattern because the dynamic segment is defined first. To fix this, static paths should be prioritized:

const routes = [
  { path: '/user/create', component: UserCreate },
  { path: '/user/:id', component: UserDetail }
]

Detailed Explanation of the Path Ranking Algorithm

Vue Router internally uses pathRanker to score paths based on the following rules:

1. Static paths > dynamic paths
2. Multi-segment paths > single-segment paths
3. Paths with strict matching (strict) receive bonus points
4. Paths with trailing slashes (end) receive bonus points

Example score comparisons:

• /about → 9 points
• /user/:id → 4 points
• /:path(.*)* → 0 points

Advanced Priority Control Techniques

1. Route Grouping and Sorting

When modularizing route definitions, use the spread operator to control the final order:

const staticRoutes = [
  { path: '/', component: Home },
  { path: '/contact', component: Contact }
]

const dynamicRoutes = [
  { path: '/user/:id', component: User },
  { path: '/product/:slug', component: Product }
]

export default [...staticRoutes, ...dynamicRoutes]

2. Route Meta Tagging

Use the meta field to mark route characteristics and dynamically adjust with navigation guards:

{
  path: '/admin/:page',
  component: Admin,
  meta: { priority: 'high' }
}

3. Dynamic Route Insertion

When using router.addRoute(), control the position via the index:

router.addRoute({
  path: '/emergency',
  component: EmergencyPage
}, 0) // Insert at the beginning of the route array

Handling Special Scenarios in Practice

1. Wildcard Route Priority

Catch-all routes (*) must be placed last:

{
  path: '/:pathMatch(.*)*',
  component: NotFound,
  // Explicitly set the lowest priority
  meta: { priority: -Infinity } 
}

2. Nested Route Matching Order

Child routes have independent priority from parent routes:

{
  path: '/dashboard',
  component: Dashboard,
  children: [
    { path: '', component: Overview }, // /dashboard
    { path: 'settings', component: Settings }, // /dashboard/settings
    { path: ':tab', component: TabPage } // /dashboard/analytics
  ]
}

3. Redirect Route Priority

Explicit redirects take precedence over dynamic routes:

{
  path: '/legacy',
  redirect: '/new-path' // Higher priority
},
{
  path: '/:catchAll(.*)',
  component: NotFound
}

Performance Optimization Recommendations

1. Frequently accessed routes should be prioritized.
2. When using route lazy loading, pay attention to the splitting strategy:

{
  path: '/heavy-page',
  component: () => import(/* webpackPrefetch: true */ './HeavyPage.vue')
}

3. Avoid overly complex dynamic segment matching:

// Not recommended
{ path: '/:lang/:category/:subcategory/:id(\\d+)' }

// Recommended: Split into multi-level routes
{
  path: '/:lang',
  children: [
    { path: ':category', children: [...] }
  ]
}

Debugging Route Priority

Check the final matching order via the router instance:

console.log(router.getRoutes().map(r => r.path))

Or log matched routes in navigation guards:

router.beforeEach((to, from) => {
  console.log('Matched routes:', to.matched.map(r => r.path))
})