Параметры маршрутов

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

Динамические сегменты

Динамический сегмент указывается в маршруте с помощью двоеточия : перед именем параметра:

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

Здесь :id — динамический параметр. Он будет доступен внутри компонента через объект this.$route.params:

export default {
  mounted() {
    console.log(this.$route.params.id);
  }
}

Особенности динамических сегментов:

  • Могут быть обязательными или необязательными.
  • Несколько параметров могут использоваться одновременно:
{ path: '/user/:userId/post/:postId', component: Post }
  • Параметры всегда передаются в виде строк, их нужно конвертировать в число при необходимости:
const userId = Number(this.$route.params.userId);

Необязательные параметры

Необязательные параметры задаются с помощью символа ?:

{ path: '/search/:query?', component: Search }

Если параметр не передан, this.$route.params.query будет undefined.

Параметры запроса

Параметры запроса — это ключи и значения, передаваемые после ? в URL:

/products?page=2&sort=asc

В Vue Router они доступны через this.$route.query:

console.log(this.$route.query.page); // "2"
console.log(this.$route.query.sort); // "asc"

Особенности параметров запроса:

  • Могут быть опциональными.
  • Поддерживают множественные значения для одного ключа (массивы):
/filter?tag=js&tag=vue
console.log(this.$route.query.tag); // ["js", "vue"]
  • Не оказывают влияния на сопоставление маршрута — используются только для передачи данных.

Программная навигация с параметрами

Vue Router позволяет переходить на маршруты с параметрами как динамически, так и через объект:

// Динамический сегмент
this.$router.push({ name: 'user', params: { id: 123 } });

// Параметры запроса
this.$router.push({ path: '/products', query: { page: 2, sort: 'asc' } });

Важный момент: при использовании name маршрута параметры передаются через params, а при использовании path — через query.

Связывание параметров с компонентом

Для автоматического отслеживания изменений параметров можно использовать watch или beforeRouteUpdate в компоненте:

export default {
  watch: {
    '$route.params.id'(newId) {
      this.fetchUser(newId);
    }
  }
}
export default {
  beforeRouteUpdate(to, from, next) {
    this.fetchUser(to.params.id);
    next();
  }
}

Группы и регулярные выражения

Динамические сегменты поддерживают регулярные выражения для валидации:

{ path: '/user/:id(\\d+)', component: User }

Это гарантирует, что id будет состоять только из цифр. Несоответствие регулярному выражению приведёт к тому, что маршрут не будет сопоставлен.

Дефолтные значения параметров

Vue Router не поддерживает прямое задание дефолтных значений в маршруте. Обычно это реализуется через проверку внутри компонента:

const userId = this.$route.params.id || 1;

или при навигации:

this.$router.push({ name: 'user', params: { id: id || 1 } });

Резюме работы с параметрами

  • Динамические сегменты: обязательные и необязательные параметры, доступны через params.
  • Параметры запроса: опциональные данные, доступны через query.
  • Программная навигация: использование push, replace с params и query.
  • Отслеживание изменений параметров: через watch или beforeRouteUpdate.
  • Валидация: регулярные выражения для сегментов.

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

Оглавление