Что такое приоритет сопоставления маршрутов?vue-44

Приоритет сопоставления маршрутов — это система, которая определяет, какой именно маршрут должен быть активирован, когда текущий URL соответствует нескольким зарегистрированным маршрутам.

Как работает алгоритм сопоставления

Vue Router использует следующий порядок приоритетов:

  1. Статические сегменты имеют наивысший приоритет
  2. Динамические сегменты (:param)
  3. Строгие сегменты (с regex ограничениями)
  4. Дочерние маршруты (вложенные routes)
  5. Wildcard-маршруты (*, :pathMatch(.*)*)

Пример приоритетов

const routes = [
  { path: '/user/me', component: UserMe },      // 1. Статический - высший приоритет
  { path: '/user/:id', component: User },      // 2. Динамический
  { path: '/user/:id(\\d+)', component: User }, // 3. С regex ограничением
  { path: '/user/*', component: NotFound }     // 4. Wildcard - низший приоритет
]

Практические примеры

Случай 1: Статический vs Динамический

Для URL /user/me:

  • Совпадут оба: /user/me и /user/:id
  • Будет выбран /user/me (статический приоритетнее)

Случай 2: Разные динамические параметры

Для URL /user/123:

  • Совпадут: /user/:id и /user/:id(\\d+)
  • Будет выбран /user/:id(\\d+) (regex ограничение дает приоритет)

Особые случаи

Вложенные маршруты

Дочерние маршруты имеют более низкий приоритет:

{
  path: '/parent',
  component: Parent,
  children: [
    { path: 'child', component: Child } // /parent/child
  ]
},
{ path: '/parent/child', component: Other } // Этот маршрут будет иметь приоритет

Wildcard маршруты

Должны быть объявлены последними:

// Неправильно:
{ path: '*', component: NotFound },
{ path: '/about', component: About } // Этот маршрут никогда не сработает

// Правильно:
{ path: '/about', component: About },
{ path: '*', component: NotFound } // Должен быть последним

Кастомизация поведения

Четкое соответствие

Использование strict и sensitive:

const router = createRouter({
  history: createWebHistory(),
  routes,
  strict: true, // учитывать trailing slash
  sensitive: true // учитывать регистр
})

Кастомный алгоритм сортировки

Можно изменить порядок маршрутов:

routes.sort((a, b) => {
  // Кастомная логика сравнения
  return a.path.length - b.path.length
})

Отладка сопоставления

Для проверки можно использовать:

router.resolve('/some/path').matched

Или добавить глобальный навигационный хук:

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

Резюмируем

  1. Vue Router использует четкую иерархию приоритетов
  2. Статические пути имеют наивысший приоритет
  3. Порядок объявления маршрутов важен только при равном приоритете
  4. Wildcard-маршруты должны быть объявлены последними
  5. Можно кастомизировать поведение через strict, sensitive и сортировку

Понимание приоритетов сопоставления критически важно для:

  • Предотвращения конфликтов маршрутов
  • Организации сложных структур маршрутизации
  • Оптимизации производительности маршрутизатора
  • Создания предсказуемого поведения SPA

Вопросы

Собеседования