Именованные представления

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

Синтаксис и базовая структура

Именованные представления создаются с использованием объекта components вместо единственного свойства component при определении маршрута:

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

В этом примере маршрут /dashboard будет отображать:

  • DashboardMain в стандартном <router-view> без имени
  • DashboardSidebar в <router-view name="sidebar">
  • DashboardFooter в <router-view name="footer">

Разметка для именованных представлений

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

<template>
  <div class="dashboard-layout">
    <router-view></router-view> <!-- default -->
    <router-view name="sidebar"></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

Ключевое отличие от обычного маршрута заключается в том, что каждое имя соответствует отдельному компоненту маршрута.

Динамическое управление

Именованные представления позволяют динамически менять содержимое каждой зоны интерфейса. Например, можно оставить один компонент постоянным, а другой менять в зависимости от маршрута:

const routes = [
  {
    path: '/user/:id',
    components: {
      default: UserProfile,
      sidebar: UserSidebar
    }
  },
  {
    path: '/user/:id/settings',
    components: {
      default: UserSettings,
      sidebar: UserSidebar
    }
  }
];

В данном случае sidebar остаётся неизменным, а основной контент (default) меняется при переходе между /user/:id и /user/:id/settings.

Вложенные именованные представления

Именованные представления могут использоваться внутри вложенных маршрутов. Для этого в родительском маршруте задается <router-view> с именем, а дочерние маршруты используют соответствующие компоненты:

const routes = [
  {
    path: '/account',
    components: { default: AccountLayout, sidebar: AccountSidebar },
    children: [
      {
        path: 'profile',
        components: { default: ProfileMain, sidebar: ProfileSidebar }
      },
      {
        path: 'security',
        components: { default: SecurityMain, sidebar: SecuritySidebar }
      }
    ]
  }
];

Здесь при переходе по /account/profile изменяется как основной контент, так и боковая панель, без необходимости полностью перерисовывать родительский макет.

Навигация и именованные представления

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

<router-link :to="{ path: '/dashboard' }">Dashboard</router-link>

или

this.$router.push({ path: '/dashboard' });

В объекте path или name можно указывать параметры маршрута, а Vue Router корректно отобразит все именованные представления, определённые для маршрута.

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

  • Атрибут name у <router-view> должен совпадать с ключом объекта components маршрута.
  • Если компонент для именованного представления не указан, Vue Router пропустит рендеринг этой области, не вызывая ошибок.
  • Именованные представления хорошо подходят для мастер-деталь макетов, панелей управления и интерфейсов с фиксированными элементами, такими как шапка и боковая панель.
  • Вложенные именованные представления позволяют строить комплексные интерфейсы, где каждая зона управляется своим маршрутом, не создавая лишних перерисовок всего макета.

Пример использования с динамическими props

Именованные представления поддерживают передачу пропсов через маршрут:

const routes = [
  {
    path: '/products/:id',
    components: { default: ProductMain, sidebar: ProductSidebar },
    props: {
      default: true,
      sidebar: route => ({ highlighted: route.params.id })
    }
  }
];

В этом примере основной компонент получает стандартный проп id, а боковая панель получает объект с highlighted, позволяя выделять текущий продукт в списке.

Совместимость с transition

Именованные представления можно оборачивать в <transition> или <transition-group> для анимаций:

<transition name="fade">
  <router-view name="sidebar"></router-view>
</transition>

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

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

Оглавление