动态路由优先级调整

动态路由优先级调整是Vue.js中路由配置的核心技巧之一，合理设置路由匹配顺序能有效避免路径冲突和意外跳转。下面从实际场景出发，详细解析如何通过调整路由定义顺序和使用pathRanker算法优化匹配逻辑。

路由匹配的基本原理

Vue Router采用先到先得的匹配策略，当定义多个相似路径时，先定义的路由会优先匹配。考虑以下路由配置：

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

这种情况下访问/user/create会匹配到:id模式，因为动态段的路由定义在前。需要将静态路径前置：

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

路径排名算法详解

Vue Router内部使用pathRanker对路径进行评分，规则包括：

1. 静态路径 > 动态路径
2. 多段路径 > 单段路径
3. 带严格匹配(strict)的路径获得加分
4. 带结尾斜线(end)的路径获得加分

示例评分对比：

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

高级优先级控制技巧

1. 路由分组排序

通过模块化路由定义时，可使用扩展运算符控制最终顺序：

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. 路由元信息标记

通过meta字段标记路由特性，配合导航守卫动态调整：

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

3. 动态插入路由

使用router.addRoute()时可通过索引控制位置：

router.addRoute({
  path: '/emergency',
  component: EmergencyPage
}, 0) // 插入到路由数组首位

实战中的特殊场景处理

1. 通配符路由的优先级

捕获所有路由(*)必须放在最后：

{
  path: '/:pathMatch(.*)*',
  component: NotFound,
  // 显式设置优先级最低
  meta: { priority: -Infinity } 
}

2. 嵌套路由的匹配顺序

子路由的优先级独立于父路由：

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

3. 重定向路由的优先级

显式重定向比动态路由优先级高：

{
  path: '/legacy',
  redirect: '/new-path' // 优先匹配
},
{
  path: '/:catchAll(.*)',
  component: NotFound
}

性能优化建议

1. 高频访问的路由应前置
2. 使用路由懒加载时注意拆分策略：

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

3. 避免过度复杂的动态段匹配：

// 不推荐
{ path: '/:lang/:category/:subcategory/:id(\\d+)' }

// 推荐拆分为多级路由
{
  path: '/:lang',
  children: [
    { path: ':category', children: [...] }
  ]
}

调试路由优先级

可通过路由实例检查最终匹配顺序：

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

或在导航守卫中输出匹配记录：

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