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

Очень часто нам нужно сопоставить маршруты с заданным шаблоном одному и тому же компоненту. Например, у нас может быть компонент User, который должен отображаться для всех пользователей, но с разными идентификаторами пользователей. В vue-router мы можем использовать динамический сегмент в пути для этого:

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User }
  ]
})

Теперь URL-адреса, такие как /user/foo и /user/bar, оба будут сопоставлены с одним и тем же маршрутом.

Динамический сегмент обозначается двоеточием :. При сопоставлении маршрута значение динамических сегментов будет доступно как this.$route.params в каждом компоненте. Таким образом, мы можем отобразить текущий идентификатор пользователя, обновив шаблон User на это:

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

Вы можете посмотреть живой пример здесь.

Вы можете иметь несколько динамических сегментов в одном маршруте, и они будут сопоставлены с соответствующими полями в $route.params. Примеры:

В дополнение к $route.params, объект $route также предоставляет другую полезную информацию, такую как $route.query (если в URL есть запрос), $route.hash, и т.д. Вы можете ознакомиться со всеми деталями в Справочнике API.

Реагирование на изменения параметров

Следует отметить, что при использовании маршрутов с параметрами, когда пользователь переходит от /user/foo к /user/bar, будет повторно использован тот же экземпляр компонента. Поскольку оба маршрута отображают один и тот же компонент, это более эффективно, чем уничтожение старого экземпляра и создание нового. Однако это также означает, что жизненные циклы компонента не будут вызваны.

Чтобы отреагировать на изменения параметров в одном и том же компоненте, вы можете просто отслеживать объект $route:

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // react to route changes...
    }
  }
}

Или используйте beforeRouteUpdate защиту навигации, представленную в версии 2.2:

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

Маршрут-ловушка / 404 страница не найдена

Регулярные параметры будут соответствовать только символам между фрагментами URL, разделенными /. Если мы хотим сопоставить любые символы, мы можем использовать звездочку (*):

{
  // will match everything
  path: '*'
}
{
  // will match anything starting with `/user-`
  path: '/user-*'
}

При использовании маршрутов со звездочкой убедитесь, что ваши маршруты правильно упорядочены, чтобы маршруты со звездочкой находились в конце. Маршрут { path: '*' } обычно используется для 404 ошибок на стороне клиента. Если вы используете режим History, убедитесь, что вы правильно настраиваете свой сервер также.

При использовании звездочки параметр pathMatch автоматически добавляется в $route.params. Он содержит остальную часть URL, соответствующую звездочке:

// Given a route { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'

// Given a route { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

Расширенные шаблоны сопоставления

vue-router использует path-to-regexp в качестве своего движка для сопоставления путей, поэтому он поддерживает множество расширенных шаблонов сопоставления, таких как необязательные динамические сегменты, нулевые или более / одно или более требований, а также пользовательские шаблоны регулярных выражений. Ознакомьтесь с его документацией по этим расширенным шаблонам и этим примером использования их в vue-router.

Приоритет сопоставления

Иногда один и тот же URL может соответствовать нескольким маршрутам. В таком случае приоритет сопоставления определяется порядком определения маршрутов: чем раньше определен маршрут, тем выше его приоритет.