Компоненты router-link и router-view

Vue.js предоставляет мощную систему маршрутизации через библиотеку Vue Router, которая позволяет организовывать навигацию в одностраничных приложениях (SPA). Основными инструментами для работы с маршрутами являются компоненты router-link и router-view.

Компонент router-link служит для создания навигационных ссылок, аналогичных <a> в обычном HTML, но с полной интеграцией в систему маршрутов Vue.js.

Синтаксис:

<router-link to="/about">О проекте</router-link>
  • to — путь маршрута, на который будет происходить переход. Может быть строкой или объектом.
<router-link :to="{ name: 'user', params: { id: 123 }}">Профиль пользователя</router-link>

  • При использовании объекта to можно указывать:

    • name — имя маршрута, заданное при конфигурации маршрутов.
    • params — параметры маршрута.
    • query — строка запроса (?key=value).

Активные классы:

router-link автоматически добавляет CSS-классы для активных ссылок:

  • router-link-active — применяется к ссылке, когда путь совпадает с текущим маршрутом.
  • router-link-exact-active — применяется, когда путь точно совпадает с маршрутом.

Можно переопределить классы:

<router-link to="/about" active-class="active" exact-active-class="exact-active">О проекте</router-link>

Использование слотов:

router-link поддерживает пользовательские элементы через слоты:

<router-link to="/home">
  <button>На главную</button>
</router-link>

При этом переход сохраняется, а оформление ссылки можно полностью кастомизировать.

router-view: отображение компонентов маршрутов

Компонент router-view выполняет роль контейнера для компонентов, которые рендерятся в зависимости от текущего маршрута.

Базовое использование:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

Когда путь изменяется, Vue Router подставляет в router-view соответствующий компонент, указанный в конфигурации маршрутов:

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

Именованные router-view:

Можно использовать несколько router-view с разными именами для одновременного отображения нескольких компонентов:

<router-view name="main"></router-view>
<router-view name="sidebar"></router-view>

Конфигурация маршрута с именованными компонентами:

const routes = [
  {
    path: '/dashboard',
    components: {
      main: DashboardMain,
      sidebar: DashboardSidebar,
    }
  }
];

Динамическая подстановка компонентов:

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

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>

Комбинация router-link и router-view позволяет создавать полноценную навигацию:

  1. router-link формирует маршруты и управляет переходами.
  2. router-view отображает соответствующие компоненты.

Пример с меню и основной областью:

<template>
  <div>
    <nav>
      <router-link to="/">Главная</router-link>
      <router-link to="/about">О проекте</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

При клике на ссылку содержимое в <router-view> заменяется на компонент, связанный с маршрутом.

Переходы программно

Кроме использования router-link, переходы можно выполнять программно через объект маршрутизатора:

this.$router.push('/about');
this.$router.replace({ name: 'user', params: { id: 123 } });

Разница:

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

Особенности и рекомендации

  • Использовать именованные маршруты и параметры для повышения гибкости навигации.
  • Всегда применять router-link вместо <a> для внутренних ссылок, чтобы избежать полной перезагрузки страницы.
  • Для крупных приложений с несколькими областями контента применять именованные router-view.
  • Компонент router-view поддерживает вложенные маршруты, что позволяет строить сложные интерфейсы с иерархией страниц.

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

Оглавление