Как организуется маршрутизация во Vue-приложении?

Маршрутизация во Vue строится декларативно и централизованно.

Базовая структура

Обычно маршрутизация включает:

• файл конфигурации роутов

• экземпляр роутера

• компонент-обёртку для отображения маршрутов

Пример базовой конфигурации:

const routes = [
  { path: '/', component: Home },
  { path: '/users', component: Users }
]

Отображение маршрутов

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

<router-view />

Vue Router подставляет туда компонент, соответствующий текущему URL.

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

Для сложных интерфейсов применяются вложенные маршруты:

• страницы с табами

• layout с внутренней навигацией

• master-detail интерфейсы

Масштабирование

В крупных проектах:

• маршруты разбиваются по модулям

• используется lazy loading

• вводятся layout-компоненты

Краткий вывод

Маршрутизация во Vue строится вокруг конфигурации маршрутов и router-view, что позволяет гибко управлять навигацией SPA.