Strict и sensitive режимы

Vue Router предоставляет гибкие возможности для настройки маршрутизации в приложениях на Vue.js. Среди ключевых параметров маршрутов существуют два специальных режима: strict и sensitive. Они влияют на поведение маршрутов при сопоставлении URL с заданными шаблонами.

Режим strict

Режим strict контролирует строгость сопоставления слэшей в конце маршрута. По умолчанию Vue Router не различает URL с завершающим слэшем и без него. Например, маршрут /about и URL /about/ будут считаться одинаковыми.

Синтаксис и использование:

const routes = [
  {
    path: '/about/',
    component: About,
    strict: true
  }
];

Поведение при strict: true:

  • /about/ → совпадение с маршрутом.
  • /about → не совпадает, будет перенаправление на 404 или другой маршрут.
  • /about// → не совпадает.

Примечание: Режим strict особенно полезен, когда необходимо четко контролировать URL-структуру приложения и избегать дублирования страниц с разными вариантами слэшей.

Режим sensitive

Режим sensitive управляет чувствительностью маршрута к регистру символов. По умолчанию маршруты в Vue Router регистронезависимы: /About и /about будут сопоставлены с одинаковым маршрутом.

Синтаксис и использование:

const routes = [
  {
    path: '/profile',
    component: Profile,
    sensitive: true
  }
];

Поведение при sensitive: true:

  • /profile → совпадение.
  • /Profile → не совпадает.
  • /PROFILE → не совпадает.

Примечание: Режим sensitive позволяет соблюдать единообразие URL в приложении, особенно при интеграции с внешними системами, где регистр символов критичен.

Совместное использование strict и sensitive

Оба режима могут использоваться одновременно для одного маршрута:

const routes = [
  {
    path: '/account/',
    component: Account,
    strict: true,
    sensitive: true
  }
];

Пример поведения:

URL Совпадение
/account/ Да
/account Нет
/Account/ Нет
/ACCOUNT/ Нет

Это позволяет создавать маршруты с абсолютно предсказуемым сопоставлением, где важен как регистр символов, так и наличие завершающего слэша.

Отличие от параметров маршрута

Важно понимать, что strict и sensitive не влияют на параметры маршрутов (:id, :slug). Например:

{
  path: '/user/:id',
  component: User,
  sensitive: true,
  strict: true
}
  • Параметр :id всегда сопоставляется как динамическая часть URL.
  • Режим sensitive учитывает регистр только в статической части маршрута (/user/).
  • Режим strict проверяет слэш после :id, если маршрут определен с завершающим /.

Практические рекомендации

  1. Единообразие URL: Использование strict предотвращает дублирование страниц с / и без /.
  2. Чувствительность к регистру: Использование sensitive важно при интеграции с API, где путь строго чувствителен к регистру.
  3. Совместное применение: В больших приложениях с разнообразными URL-структурами комбинация обоих режимов помогает избежать неожиданных совпадений маршрутов.
  4. SEO и навигация: Контроль слэшей и регистра улучшает структуру ссылок и уменьшает вероятность дублированного контента для поисковых систем.

Эти режимы являются тонкими, но мощными инструментами настройки маршрутов в Vue Router, позволяя добиться точного контроля над поведением URL и повышая стабильность навигации в приложении.

Оглавление