Синтаксис сопоставления маршрутов

Смотрите бесплатные видео-уроки на Vue School

Большинство приложений будут использовать статические маршруты, такие как /about, и динамические маршруты, такие как /users/:userId, как мы только что видели в динамическом сопоставлении маршрутов, но у Vue Router есть намного больше возможностей!

Совет

Для простоты все записи маршрутов опускают свойство component, чтобы сосредоточиться на значении path.

Регулярные выражения в качестве параметров

При определении параметра, например, :userId, мы внутренне используем следующее регулярное выражение ([^/]+) (по крайней мере один символ, не являющийся слэшем /), чтобы извлекать параметры из URL-адресов. Это работает хорошо, если вам необходимо различать два маршрута на основе содержимого параметра. Представьте себе два маршрута /:orderId и /:productName, которые оба будут соответствовать точно таким же URL-адресам, поэтому нам нужен способ их различать. Самым простым способом будет добавить статическую секцию в путь, который различает их:

const routes = [
  // соответствует /o/3549
  { path: '/o/:orderId' },
  // соответствует /p/books
  { path: '/p/:productName' },
]

Но в некоторых сценариях мы не хотим добавлять эту статическую секцию /o или /p. Тем не менее, orderId всегда является числом, в то время как productName может быть чем угодно, поэтому мы можем указать регулярное выражение для параметра в круглых скобках:

const routes = [
  // /:orderId -> соответствует только числам
  { path: '/:orderId(\\d+)' },
  // /:productName -> соответствует всему остальному
  { path: '/:productName' },
]

Теперь при переходе на /25 маршрут будет соответствовать /:orderId, а при переходе к любому другому - /:productName. Порядок массива routes даже не имеет значения!

Совет

Убедитесь, что для передачи символа обратной косой черты в строке в JavaScript необходимо экранировать обратные косые черты (\), как мы это делали с \d(становится \\\d).

Повторяющиеся параметры

Если необходимо сопоставить маршруты с несколькими секциями, например /first/second/third, то следует пометить параметр как повторяющийся с помощью * (0 и более) и + (1 и более):

const routes = [
  // /:chapters -> соответствует /one, /one/two, /one/two/three и т.д.
  { path: '/:chapters+' },
  // /:chapters -> соответствует /, /one, /one/two, /one/two/three и т.д.
  { path: '/:chapters*' },
]

Это позволит получить массив параметров вместо строки, а также потребует передачи массива при использовании именованных маршрутов:

// задан маршрут { path: '/:chapters*', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// преобразуется в /
router.resolve({ name: 'chapters', params: { chapters: ['a', 'b'] } }).href
// преобразуется в  /a/b

// задан маршрут { path: '/:chapters+', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// выдаст ошибку, так как `chapters` пустое

Их также можно комбинировать с регулярным выражением, добавляя после закрывающих круглых скобок:

const routes = [
  // соответствует только числам
  // соответствует /1, /1/2 и т.д.
  { path: '/:chapters(\\d+)+' },
  // соответствует /, /1, /1/2 и т.д.
  { path: '/:chapters(\\d+)*' },
]

Параметры маршрута sensitive и strict

По умолчанию все маршруты нечувствительны к регистру и соответствуют маршрутам как без завершающего слэша, так и с ним. Например, маршрут /users соответствует /users, /users/ и даже /Users/. Это поведение можно настроить с помощью параметров strict и sensitive, их можно устанавливать как на уровне маршрутизатора, так и на уровне маршрута:

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // будет соответствовать /users/posva но не будет для:
    // - /users/posva/ потому что strict: true
    // - /Users/posva потому что: true
    { path: '/users/:id', sensitive: true },
    // будет соответствовать /users, /Users и  /users/42, но не будет /users/ или /users/42/
    { path: '/users/:id?' },
  ],
  strict: true, // применяется ко всем маршрутам
})

Необязательные параметры

Можно также отметить параметр как необязательный с помощью модификатора ? (0 или 1):

const routes = [
  // будет соответствовать /users и /users/posva
  { path: '/users/:userId?' },
  // будет соответствовать /users и /users/42
  { path: '/users/:userId(\\d+)?' },
]

Обратите внимание, что * технически также помечает параметр как необязательный, но параметры ? не могут повторяться.

Если сегмент маршрута содержит больше, чем только необязательный параметр, он не будет соответствовать пути без слэша в конце. Например:

• /users/:uid?-:name? не будет соответствовать /users, только /users/- или даже /users/-/
• /users/:uid(\\d+)?:name? не будет соответствовать /users, только /users/, /users/2, /users/2/, и т.д.

Вы можете поэксперементировать с синтаксисом сопоставления в песочнице

Отладка

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