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

Смотрите бесплатные видео-уроки на Vue School

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

import User from './User.vue'  // маршруты передаются в `createRouter`. const routes = [  // динамические сегменты начинаются с двоеточия  { path: '/users/:id', component: User }, ]

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

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

<template>  <div>  <!-- The current route is accessible as $route in the template -->  User {{ $route.params.id }}  </div> </template>

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

шаблон	сопоставленный путь	route.params
/users/:username	/users/eduardo	{ username: 'eduardo' }
/users/:username/posts/:postId	/users/eduardo/posts/123	{ username: 'eduardo', postId: '123' }

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

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

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

Смотрите бесплатные видео-уроки на Vue School

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

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

Composition API

<script setup> import { watch } from 'vue' import { useRoute } from 'vue-router'  const route = useRoute()  watch(  () => route.params.id,  (newId, oldId) => {  // обработка изменения параметров маршрута...  } ) </script>

Options API

<script> export default {  created() {  this.$watch(  () => this.$route.params.id,  (newId, oldId) => {  // обработка изменения параметров маршрута...  }  )  }, } </script>

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

Composition API

<script setup> import { onBeforeRouteUpdate } from 'vue-router' // ...  onBeforeRouteUpdate(async (to, from) => {  // обработка изменения параметров маршрута...  userData.value = await fetchUser(to.params.id) }) </script>

Options API

<script> export default {  async beforeRouteUpdate(to, from) {  // обработка изменения параметров маршрута...  this.userData = await fetchUser(to.params.id)  },  // ... } </script>

Страница ошибки 404 / отслеживание ненайденных маршрутов

Смотрите бесплатные видео-уроки на Vue School

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

const routes = [  // будет сопоставляться всем маршрутам и будет помещено в `route.params.pathMatch`.  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },  // будет сопоставляться всему, что начинается с `/user-`, и будет помещено в `route.params.afterUser`.  { path: '/user-:afterUser(.*)', component: UserGeneric }, ]

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

router.push({  name: 'NotFound',  // сохранить текущий путь и удалить первый символ, чтобы целевой URL не начинался с `//`.  params: { pathMatch: route.path.substring(1).split('/') },  // сохраняем существующий запрос и хэш, если таковой имеется  query: route.query,  hash: route.hash, })

Подробнее см. в разделе повторяющиеся параметры.

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

Продвинутые возможности сопоставления

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