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

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

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

// these are passed to `createRouter`
const routes = [
  // dynamic segments start with a colon
  { path: '/users/:id', component: User },
]

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

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

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

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

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

Рабочий демонстрационный пример этого примера можно найти здесь.

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

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

Для реагирования на изменения параметров в том же компоненте, вы можете просто отслеживать что-либо в объекте $route, в этом случае, $route.params:

const User = {
  template: '...',
  created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // react to route changes...
      }
    )
  },
}

Или используйте beforeRouteUpdate фильтр навигации, который также позволяет отменить навигацию:

const User = {
  template: '...',
  async beforeRouteUpdate(to, from) {
    // react to route changes...
    this.userData = await fetchUser(to.params.id)
  },
}

Маршрут "catch all" / 404 "Не найдено"

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

const routes = [
  // will match everything and put it under `$route.params.pathMatch`
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  // will match anything starting with `/user-` and put it under `$route.params.afterUser`
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]

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

this.$router.push({
  name: 'NotFound',
  // preserve current path and remove the first char to avoid the target URL starting with `//`
  params: { pathMatch: this.$route.path.substring(1).split('/') },
  // preserve existing query and hash if any
  query: this.$route.query,
  hash: this.$route.hash,
})

Дополнительную информацию см. в разделе повторяемые параметры.

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

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

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