Получение параметров в компонентах

Vue Router предоставляет мощные возможности для работы с параметрами маршрутов, что позволяет динамически передавать данные между компонентами и управлять состоянием приложения через URL. Параметры маршрутов делятся на два основных типа: путьовые параметры (params) и параметры запроса (query). Каждый из этих типов имеет свои особенности использования и способы получения в компонентах.

Путьовые параметры (params)

Путьовые параметры задаются непосредственно в пути маршрута через двоеточие (:). Например:

const routes = [
  {
    path: '/user/:id',
    component: UserProfile
  }
]

В этом примере :id является динамическим сегментом маршрута. Любое значение, подставленное в URL после /user/, будет доступно в компоненте UserProfile.

Доступ к параметрам:

  1. Через объект this.$route.params:
export default {
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
}
  1. Через Composition API с useRoute:
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = route.params.id;

    return { userId };
  }
}

Особенности:

  • Путьовые параметры всегда строки. Для работы с числами или другими типами данных необходимо конвертировать значения вручную.
  • При переходе между маршрутами с одинаковой структурой компонента Vue не уничтожает, а повторно использует его. Чтобы реагировать на изменение параметров, используют наблюдатели (watch) или beforeRouteUpdate хук.
watch(
  () => route.params.id,
  (newId, oldId) => {
    console.log(`Маршрут изменился с ${oldId} на ${newId}`);
  }
);

или

export default {
  beforeRouteUpdate(to, from, next) {
    console.log(`Обновление маршрута с ${from.params.id} на ${to.params.id}`);
    next();
  }
}

Параметры запроса (query)

Параметры запроса добавляются в URL после символа ? и могут содержать несколько значений:

/users?sort=desc&page=2

Доступ к параметрам:

  1. Через this.$route.query:
export default {
  computed: {
    sortOrder() {
      return this.$route.query.sort;
    },
    pageNumber() {
      return Number(this.$route.query.page);
    }
  }
}
  1. Через Composition API:
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const sortOrder = route.query.sort;
    const pageNumber = Number(route.query.page);

    return { sortOrder, pageNumber };
  }
}

Особенности:

  • Параметры запроса автоматически сериализуются как строки, поэтому при работе с числами или логическими значениями необходима ручная конвертация.
  • Изменение query не уничтожает компонент, поэтому важно отслеживать изменения через watch или watchEffect.
watch(
  () => route.query.page,
  (newPage) => {
    console.log(`Текущая страница: ${newPage}`);
  }
);

Передача параметров при навигации

Использование программной навигации:

// С использованием пути
router.push(`/user/${userId}`);

// С использованием объекта
router.push({ name: 'user', params: { id: userId } });

// С query
router.push({ path: '/users', query: { page: 2, sort: 'desc' } });

Особенности params и query при навигации:

  • При использовании params предпочтительно указывать имя маршрута через name, чтобы Vue Router корректно подставил параметр.
  • Параметры query всегда передаются как объект и сериализуются автоматически.

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

Вложенные компоненты, используемые в маршрутах, могут получать параметры через props, что упрощает тестирование и делает компоненты более декларативными.

const routes = [
  {
    path: '/user/:id',
    component: UserProfile,
    props: true
  }
]

Теперь компонент UserProfile получает id как обычный пропс:

export default {
  props: ['id'],
  mounted() {
    console.log(`ID пользователя: ${this.id}`);
  }
}

Можно также использовать функцию для более гибкой передачи данных:

props: route => ({ userId: route.params.id, sortOrder: route.query.sort })

Итоги по типам параметров

Тип параметра Доступ через Примечание
Путьовой (params) this.$route.params Динамические сегменты URL, обязательны в маршруте
Запрос (query) this.$route.query Не обязательны, передаются после ?
Props Передача в компонент Позволяет компонентым оставаться декларативными и тестируемыми

Рекомендации по использованию

  • Использовать params для обязательных идентификаторов и ключевых ресурсов.
  • Использовать query для фильтров, сортировки и параметров пагинации.
  • Всегда отслеживать изменения параметров через watch или beforeRouteUpdate для корректного обновления данных.
  • Предпочтительно использовать props для передачи параметров в компоненты, что улучшает читаемость и упрощает тестирование.
Оглавление