Множественные RouterView

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

Основная концепция

В Vue Router каждая точка рендеринга компонентов маршрута представлена компонентом <router-view>. По умолчанию <router-view> рендерит компонент, указанный для текущего пути. Множественные RouterView позволяют:

  • Рендерить разные компоненты в разных областях интерфейса одновременно.
  • Назначать компоненты маршрута в конкретные именованные области.
  • Создавать многоуровневую маршрутизацию, где один маршрут управляет несколькими вложенными зонами.

Синтаксис именованных RouterView

Чтобы использовать несколько RouterView, необходимо присвоить имена:

<template>
  <div class="layout">
    <header>
      <router-view name="header"></router-view>
    </header>
    <main>
      <router-view></router-view> <!-- default view -->
    </main>
    <aside>
      <router-view name="sidebar"></router-view>
    </aside>
  </div>
</template>

Здесь:

  • name="header" — RouterView, который будет отображать компонент маршрута с именем header.
  • <router-view> без имени — default view, основной контент.
  • name="sidebar" — дополнительная область для боковой панели.

Определение маршрутов с несколькими компонентами

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

const routes = [
  {
    path: '/dashboard',
    components: {
      default: DashboardMain,
      header: DashboardHeader,
      sidebar: DashboardSidebar
    }
  },
  {
    path: '/profile',
    components: {
      default: ProfileMain,
      header: ProfileHeader,
      sidebar: ProfileSidebar
    }
  }
];

const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes
});
  • Ключи объекта components должны совпадать с атрибутами name в RouterView.
  • Default-компонент назначается через ключ default.
  • Можно добавлять любые названия для дополнительных областей интерфейса.

Вложенные множественные RouterView

Для сложных интерфейсов с вложенными маршрутами можно комбинировать множественные RouterView с вложенной маршрутизацией:

const routes = [
  {
    path: '/dashboard',
    components: {
      default: DashboardMain,
      header: DashboardHeader
    },
    children: [
      {
        path: 'analytics',
        components: {
          default: AnalyticsMain,
          sidebar: AnalyticsSidebar
        }
      },
      {
        path: 'reports',
        components: {
          default: ReportsMain,
          sidebar: ReportsSidebar
        }
      }
    ]
  }
];
  • Родительский маршрут /dashboard рендерит DashboardMain и DashboardHeader.
  • Вложенные маршруты analytics и reports рендерят свои компоненты в default и sidebar.
  • Родительские RouterView остаются на месте, а вложенные управляют только своими областями.

Динамическая загрузка компонентов

Vue Router позволяет подключать компоненты динамически с использованием defineAsyncComponent или обычного import:

const routes = [
  {
    path: '/dashboard',
    components: {
      default: () => import('./components/DashboardMain.vue'),
      header: () => import('./components/DashboardHeader.vue'),
      sidebar: () => import('./components/DashboardSidebar.vue')
    }
  }
];
  • Это уменьшает размер начальной сборки приложения.
  • Каждый компонент подгружается только при переходе на соответствующий маршрут.

Передача props в именованные RouterView

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

const routes = [
  {
    path: '/user/:id',
    components: {
      default: UserMain,
      sidebar: UserSidebar
    },
    props: {
      default: true,
      sidebar: route => ({ userId: route.params.id })
    }
  }
];
  • default: true автоматически передает все параметры маршрута.
  • Для sidebar используется функция, позволяющая формировать кастомный объект props.

Программная навигация

Навигация к маршрутам с множественными RouterView не отличается от обычной:

router.push({ path: '/dashboard' });
router.push({ name: 'user', params: { id: 42 } });
  • Vue Router сам рендерит компоненты в соответствующие именованные области.
  • Можно комбинировать параметры, query и hash при навигации.

Практические советы

  • Использовать именованные RouterView только при необходимости: слишком большое количество областей может усложнить структуру приложения.
  • Четко согласовывать имена в маршрутах и RouterView.
  • Комбинировать с lazy loading для оптимизации производительности.
  • Вложенные RouterView идеально подходят для админ-панелей и сложных дашбордов.

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

Оглавление