Настройка роутинга для SPA

В Quasar Framework маршрутизация организуется с использованием Vue Router, интегрированного с экосистемой Vue 3. Настройка роутинга в SPA позволяет управлять переходами между страницами без полной перезагрузки приложения, обеспечивая плавную работу интерфейса.

Создание маршрутов

Маршруты определяются в файле src/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: '/login',
    component: () => import('layouts/AuthLayout.vue'),
    children: [
      { path: '', component: () => import('pages/LoginPage.vue') }
    ]
  },
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue')
  }
];

export default routes;

Ключевые моменты:

  • path — путь маршрута, который отображается в URL.
  • component — компонент Vue, рендерящийся при переходе.
  • children — вложенные маршруты, используемые для работы с layout-компонентами.
  • :catchAll(.*)* — универсальный путь для обработки 404 страниц.

Lazy Loading компонентов

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

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

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

Использование именованных маршрутов

Присвоение имени маршруту упрощает навигацию через программный роутинг:

{
  path: '/profile/:id',
  name: 'profile',
  component: () => import('pages/ProfilePage.vue')
}

Навигация к маршруту может выполняться с помощью:

this.$router.push({ name: 'profile', params: { id: 123 } });

Использование именованных маршрутов делает код более читаемым и защищает от изменений URL-путей.

Защита маршрутов (Route Guards)

Для реализации аутентификации и контроля доступа используются navigation guards:

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters['auth/isLoggedIn'];
  
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'login' });
  } else {
    next();
  }
});

Пояснения:

  • beforeEach — глобальный guard, срабатывающий перед каждым переходом.
  • to.meta.requiresAuth — пользовательская мета-информация для маршрута.
  • next() — функция продолжения навигации; можно передать объект для редиректа.

Мета-поля маршрутов

Мета-поля позволяют хранить дополнительную информацию о маршруте, например, заголовки страниц или необходимость авторизации:

{
  path: '/dashboard',
  component: () => import('pages/DashboardPage.vue'),
  meta: { requiresAuth: true, title: 'Панель управления' }
}

Использование мета-полей в компонентах layout позволяет динамически изменять заголовки или отображение элементов интерфейса.

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

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

{
  path: '/product/:id',
  name: 'product',
  component: () => import('pages/ProductPage.vue')
}

В компоненте доступ к параметрам осуществляется через this.$route.params.id.

Программная навигация и редиректы

Навигация в SPA может быть выполнена через методы Vue Router:

// Прямой переход
this.$router.push('/home');

// С именованным маршрутом
this.$router.push({ name: 'profile', params: { id: 5 } });

// Редирект
{
  path: '/old-path',
  redirect: '/new-path'
}

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

Асинхронные маршруты и код-сплиттинг

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

const routes = [
  {
    path: '/analytics',
    component: () => import('pages/AnalyticsPage.vue' /* webpackChunkName: "analytics" */)
  }
]

Это уменьшает размер основного бандла и повышает производительность SPA.

Использование Layouts

Quasar активно использует концепцию layout-компонентов для структурирования страниц:

{
  path: '/',
  component: () => import('layouts/MainLayout.vue'),
  children: [
    { path: '', component: () => import('pages/HomePage.vue') },
    { path: 'settings', component: () => import('pages/SettingsPage.vue') }
  ]
}

Особенности:

  • Layout содержит общие элементы интерфейса (header, sidebar, footer).
  • Вложенные маршруты рендерятся в <router-view> layout-компонента.
  • Позволяет минимизировать дублирование кода и поддерживать единый стиль приложения.

Настройка Scroll Behavior

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

const router = createRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { left: 0, top: 0 };
    }
  }
});
  • savedPosition — координаты скролла при навигации назад.
  • Возврат { left: 0, top: 0 } обеспечивает скролл в начало страницы при переходе на новую страницу.

Работа с Query и Hash

Маршруты SPA поддерживают передачу параметров через query и hash:

this.$router.push({ path: '/search', query: { q: 'vue' }, hash: '#results' });
  • query используется для фильтров, поисковых запросов.
  • hash позволяет привязываться к конкретным секциям страницы.

Интеграция с Vuex и Pinia

Часто маршруты зависят от состояния приложения. Quasar и Vue Router легко интегрируются с Vuex или Pinia:

router.beforeEach((to, from, next) => {
  const isAdmin = store.getters['user/isAdmin'];
  if (to.meta.requiresAdmin && !isAdmin) {
    next({ name: 'home' });
  } else {
    next();
  }
});

Методы навигации и guards позволяют реализовать гибкую систему прав доступа без дублирования логики в компонентах.

Анимации переходов

Quasar поддерживает анимацию переходов между страницами через стандартные Vue <transition> и <router-view>:

<transition name="fade" mode="out-in">
  <router-view />
</transition>

Можно определять кастомные CSS-анимации, чтобы улучшить пользовательский опыт и визуальную плавность SPA.

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

Оглавление