Генерация ссылок

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

Основной способ генерации ссылок в Vue Router — это компонент <router-link>. Он автоматически создаёт HTML-ссылку (<a>), которая интегрирована с системой маршрутизации:

<router-link to="/about">О нас</router-link>

Здесь to может быть строкой (путь маршрута) или объектом, задающим более сложные параметры:

<router-link :to="{ name: 'user', params: { id: 42 } }">Профиль пользователя</router-link>

Особенности использования:

  • Если указан объект с name, Vue Router ищет маршрут по имени и автоматически подставляет параметры.
  • Использование params требует, чтобы маршрут имел соответствующие динамические сегменты, например:
const routes = [
  { path: '/user/:id', name: 'user', component: UserProfile }
];
  • Для обычных путей с параметрами можно использовать строку: /user/42.

Преимущества генерации ссылок через объекты

  1. Динамические параметры Позволяют подставлять значения переменных в URL без ручной конкатенации строк:
<router-link :to="{ name: 'product', params: { id: product.id } }">
  {{ product.name }}
</router-link>
  1. Добавление query-параметров Можно передавать параметры запроса через поле query:
<router-link :to="{ path: '/search', query: { q: 'Vue Router' } }">
  Поиск
</router-link>

Это создаст URL вида: /search?q=Vue+Router.

  1. Абсолютные и относительные ссылки

    • Абсолютные ссылки задаются через path.
    • Относительные ссылки автоматически учитывают текущий маршрут:
<router-link to="settings">Настройки</router-link>

Если текущий маршрут /user/42, ссылка превратится в /user/42/settings.

Программная навигация и генерация ссылок

Помимо <router-link>, ссылки можно формировать программно через методы router.push и router.replace:

this.$router.push({ name: 'user', params: { id: 42 } });
this.$router.replace({ path: '/home' });

Разница между push и replace:

  • push добавляет запись в историю браузера, позволяя вернуться назад.
  • replace заменяет текущую запись, не создавая новой в истории.

Использование объекта позволяет автоматически учитывать параметры маршрута и query:

this.$router.push({
  name: 'search',
  query: { q: this.searchTerm, page: this.page }
});

Атрибут active-class и стилизация ссылок

Vue Router автоматически добавляет класс router-link-active активной ссылке. Его можно настроить через active-class:

<router-link to="/about" active-class="active-link">О нас</router-link>

Для вложенных маршрутов используется класс router-link-exact-active, который активен только при точном совпадении URL.

Ссылки с внешними маршрутами и динамическая генерация

Для внешних ссылок <router-link> не используется; достаточно обычного <a>:

<a :href="externalUrl" target="_blank">Внешний ресурс</a>

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

<router-link :to="userProfileLink">Профиль</router-link>

<script>
export default {
  props: ['userId'],
  computed: {
    userProfileLink() {
      return { name: 'user', params: { id: this.userId } };
    }
  }
}
</script>

Генерация ссылок с опцией replace и append

  • replace используется для замены текущего маршрута при переходе.
  • append добавляет путь к текущему маршруту, что особенно полезно при вложенных маршрутах:
<router-link :to="{ path: 'settings' }" append>Настройки</router-link>

Если текущий путь /profile, итоговый URL будет /profile/settings.

Заключение по ключевым возможностям

  • <router-link> — основной способ генерации ссылок внутри SPA.
  • Использование объектов с name, params и query делает маршрутизацию гибкой и безопасной.
  • Программные методы router.push и router.replace позволяют генерировать ссылки динамически и управлять историей.
  • Стилизация активных ссылок с помощью active-class и router-link-exact-active повышает UX.
  • Атрибут append и относительные пути позволяют создавать вложенные ссылки без ручной конкатенации.

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

Оглавление