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

В библиотеке Quasar, построенной на базе Vue.js и Vue Router, вложенные маршруты позволяют организовать приложение с многоуровневой навигацией. Это особенно актуально для сложных интерфейсов, где одна страница содержит несколько подстраниц или компонентов. В Quasar структура маршрутов описывается в файле routes.js (или router/routes.js в стандартном шаблоне).

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/IndexPage.vue') },
      { path: 'about', component: () => import('pages/AboutPage.vue') },
      {
        path: 'dashboard',
        component: () => import('layouts/DashboardLayout.vue'),
        children: [
          { path: '', component: () => import('pages/dashboard/Overview.vue') },
          { path: 'settings', component: () => import('pages/dashboard/Settings.vue') },
          { path: 'analytics', component: () => import('pages/dashboard/Analytics.vue') }
        ]
      }
    ]
  }
]

export default routes

В этом примере ключевым моментом является дополнительный уровень вложенности для dashboard. Главный путь '/' использует MainLayout.vue, внутри которого находятся дочерние маршруты. Для раздела 'dashboard' подключается отдельный макет DashboardLayout.vue, и внутри него уже можно организовать свои подстраницы.

Использование <router-view> для вложенных маршрутов

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

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-toolbar-title>Dashboard</q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>
  • <router-view> в MainLayout.vue рендерит все дочерние страницы основного маршрута.
  • <router-view> в DashboardLayout.vue рендерит страницы overview, settings и analytics.

Это обеспечивает модульность интерфейса и позволяет строить сложные многоуровневые макеты без дублирования кода.

Навигация между вложенными маршрутами

Для перехода между вложенными маршрутами используется router-link с указанием полного пути или имен маршрутов. В Quasar предпочтительно использовать компоненты q-btn или q-item с to:

<q-list>
  <q-item to="/dashboard" clickable>Overview</q-item>
  <q-item to="/dashboard/settings" clickable>Settings</q-item>
  <q-item to="/dashboard/analytics" clickable>Analytics</q-item>
</q-list>

Для динамической навигации в скриптах можно использовать $router.push() или $router.replace():

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

Динамические вложенные маршруты

Quasar поддерживает динамические параметры в маршрутах, что позволяет строить страницы с изменяемым содержимым:

{
  path: 'dashboard/user/:id',
  component: () => import('pages/dashboard/UserProfile.vue'),
  props: true
}

Компонент UserProfile.vue получает параметр id как пропс:

<template>
  <div>
    <h2>Профиль пользователя {{ id }}</h2>
  </div>
</template>

<script>
export default {
  props: ['id']
}
</script>

Это позволяет создавать универсальные страницы профилей или деталей объектов, используя один компонент для разных маршрутов.

Защита вложенных маршрутов (Navigation Guards)

Для вложенных маршрутов можно применять глобальные и локальные охранники маршрутов (beforeEnter, beforeRouteEnter) для ограничения доступа:

{
  path: 'dashboard/settings',
  component: () => import('pages/dashboard/Settings.vue'),
  beforeEnter: (to, from, next) => {
    const userIsAdmin = true // пример проверки
    if (userIsAdmin) next()
    else next('/login')
  }
}

Глобальные охранники настраиваются в router/index.js:

router.beforeEach((to, from, next) => {
  const requiresAuth = to.meta.requiresAuth
  if (requiresAuth && !userLoggedIn()) next('/login')
  else next()
})

Такой подход позволяет контролировать доступ к отдельным подстраницам внутри вложенных маршрутов.

Lazy Loading и оптимизация

В Quasar для вложенных маршрутов рекомендуется использовать ленивую загрузку компонентов через динамический импорт. Это снижает размер начального бандла и ускоряет загрузку приложения:

component: () => import('pages/dashboard/Analytics.vue')

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

Структура файлов для вложенных маршрутов

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

src/
 ├─ layouts/
 │   ├─ MainLayout.vue
 │   └─ DashboardLayout.vue
 ├─ pages/
 │   ├─ IndexPage.vue
 │   ├─ AboutPage.vue
 │   └─ dashboard/
 │       ├─ Overview.vue
 │       ├─ Settings.vue
 │       └─ Analytics.vue
 └─ router/
     └─ routes.js

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

Практические рекомендации

  • Всегда использовать отдельный <router-view> для каждого уровня вложенности.
  • Поддерживать логическую иерархию маршрутов: макеты → разделы → подстраницы.
  • Применять ленивую загрузку для вложенных маршрутов.
  • Использовать динамические параметры и пропсы для универсальных компонентов.
  • Добавлять охранники маршрутов для защиты критичных разделов приложения.
  • Сохранять структуру файлов в соответствии с вложенностью маршрутов для удобного масштабирования.

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

Оглавление