Динамические пути

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

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

const router = new VueRouter({
  routes: [
    // динамические сегменты начинаются с двоеточия
    { path: '/user/:id', component: User }
  ]
})

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

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

const User = {
  template: '<div>Пользователь {{ $route.params.id }}</div>'
}

Посмотреть на пример вживую можно здесь.

В рамках одного пути можно указать несколько динамических сегментов. Для каждого появится соответствующая запись в $route.params. Например:

pattern matched path $route.params
/user/:username /user/evan { username: 'evan' }
/user/:username/post/:post_id /user/evan/post/123 { username: 'evan', post_id: 123 }

Помимо $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...
    }
  }
}

Продвинутые возможности

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

Приоритеты путей

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

results matching ""

    No results matching ""