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

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

СОВЕТ

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

Пользовательские регулярные выражения в параметрах

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

const routes = [
  // matches /o/3549
  { path: '/o/:orderId' },
  // matches /p/books
  { path: '/p/:productName' },
]

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

const routes = [
  // /:orderId -> matches only numbers
  { path: '/:orderId(\\d+)' },
  // /:productName -> matches anything else
  { path: '/:productName' },
]

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

СОВЕТ

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

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

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

const routes = [
  // /:chapters -> matches /one, /one/two, /one/two/three, etc
  { path: '/:chapters+' },
  // /:chapters -> matches /, /one, /one/two, /one/two/three, etc
  { path: '/:chapters*' },
]

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

// given { path: '/:chapters*', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// produces /
router.resolve({ name: 'chapters', params: { chapters: ['a', 'b'] } }).href
// produces /a/b

// given { path: '/:chapters+', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// throws an Error because `chapters` is empty

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

const routes = [
  // only match numbers
  // matches /1, /1/2, etc
  { path: '/:chapters(\\d+)+' },
  // matches /, /1, /1/2, etc
  { path: '/:chapters(\\d+)*' },
]

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

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

const routes = [
  // will match /users and /users/posva
  { path: '/users/:userId?' },
  // will match /users and /users/42
  { path: '/users/:userId(\\d+)?' },
]

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

Отладка

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