Компонент RouterView

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

<template>
  <div>
    <h1>Приложение</h1>
    <router-view></router-view>
  </div>
</template>

В этом примере <router-view> является контейнером для компонентов маршрутов. Если текущий маршрут указывает на /home, Vue Router отобразит компонент Home, если на /about — компонент About.

Вложенные маршруты и RouterView

RouterView поддерживает вложенные маршруты, что позволяет создавать многоуровневую навигацию. Для этого используется свойство children в конфигурации маршрутов.

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      {
        path: 'stats',
        component: Stats
      },
      {
        path: 'settings',
        component: Settings
      }
    ]
  }
];

В шаблоне родительского компонента Dashboard необходимо разместить вложенный <router-view>, куда будут подставляться дочерние компоненты:

<template>
  <div>
    <h2>Панель управления</h2>
    <router-view></router-view>
  </div>
</template>

При переходе на /dashboard/stats отобразится компонент Stats внутри Dashboard.

Динамические маршруты и RouterView

Для маршрутов с параметрами используется синтаксис :param:

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

Внутри компонента UserProfile параметры маршрута доступны через объект route:

<script>
export default {
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
}
</script>

RouterView автоматически подставляет компонент UserProfile при переходе на /user/42, а this.$route.params.id будет равен "42".

Именованные RouterView

Vue Router позволяет использовать несколько <router-view> в одном шаблоне с именованными слотами. Это удобно для реализации сложных макетов с боковыми панелями, хедерами и футерами.

const routes = [
  {
    path: '/layout',
    components: {
      default: MainContent,
      sidebar: Sidebar
    }
  }
];

Шаблон с именованными RouterView:

<template>
  <div>
    <router-view></router-view> <!-- default -->
    <router-view name="sidebar"></router-view> <!-- sidebar -->
  </div>
</template>

При переходе на /layout в основной <router-view> загрузится MainContent, а в <router-view name="sidebar"> — Sidebar.

Программное управление переходами

Для изменения маршрута без использования ссылок <router-link> можно использовать методы роутера:

  • this.$router.push('/path') — добавляет новый маршрут в историю
  • this.$router.replace('/path') — заменяет текущий маршрут
  • this.$router.go(n) — перемещается на n шагов по истории

RouterView реагирует на эти изменения автоматически, подставляя соответствующий компонент.

Lazy Loading компонентов через RouterView

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

const routes = [
  {
    path: '/reports',
    component: () => import('./components/Reports.vue')
  }
];

Когда пользователь переходит на /reports, RouterView подставляет компонент Reports.vue без предварительной загрузки всех компонентов, что снижает начальный размер бандла.

Передача props через RouterView

Компоненты, загружаемые через <router-view>, могут принимать props напрямую из маршрута:

const routes = [
  {
    path: '/product/:id',
    component: Product,
    props: true
  }
];

В компоненте Product:

<script>
export default {
  props: ['id'],
  mounted() {
    console.log('ID продукта:', this.id);
  }
}
</script>

Таким образом, <router-view> автоматически передает параметры маршрута как props, что упрощает архитектуру компонентов.

Заключение по функциональности RouterView

  • Отображает компонент, соответствующий текущему маршруту.
  • Поддерживает вложенные маршруты через вложенные <router-view>.
  • Позволяет использовать динамические параметры и передавать их через props.
  • Поддерживает именованные слоты для сложных макетов.
  • Работает с программными переходами и lazy loading.

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

Оглавление