Для определения маршрутов в Vue Router используется метод router с массивом объектов, каждый из которых представляет собой маршрут. Каждый объект маршрута содержит свойства, такие как path (путь), component (компонент для отображения) и другие опциональные параметры.

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

Простой маршрут

Маршрут с динамическим параметром

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

В компонентах Vue, связанных с маршрутами, можно получить доступ к параметрам маршрута через объект $route.params

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

Самый простой способ — добавить статический раздел к пути, который их отличает

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

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

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

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

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

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

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

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