Интеграция Vue Router в Quasar

Quasar построен на базе Vue.js, что позволяет использовать все стандартные возможности экосистемы Vue, включая маршрутизацию через Vue Router. В Quasar Vue Router интегрирован по умолчанию, что упрощает настройку навигации в приложениях с одностраничной архитектурой (SPA) и мультистраничных приложениях (MPA).

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

Маршруты в Quasar определяются в файле src/router/routes.js. Каждый маршрут представляет собой объект с ключевыми свойствами:

  • path — URL-путь, по которому будет доступен компонент.
  • component — компонент Vue, который рендерится при переходе на указанный путь.
  • name — уникальное имя маршрута для программной навигации.
  • meta — объект для хранения дополнительных данных маршрута, таких как авторизация, заголовки страниц и прочее.

Пример базового маршрута:

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue'), name: 'home' },
      { path: 'about', component: () => import('pages/About.vue'), name: 'about' }
    ]
  }
];

export default routes;

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

Настройка Vue Router

Файл src/router/index.js содержит конфигурацию Vue Router, которая автоматически импортирует созданные маршруты:

import { route } from 'quasar/wrappers';
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
import routes from './routes';

export default route(function (/* { store, ssrContext } */) {
  const createHistory = process.env.SERVER
    ? createMemoryHistory
    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);

  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,
    history: createHistory(process.env.VUE_ROUTER_BASE)
  });

  return Router;
});

Особое внимание стоит уделить режиму истории (history или hash). Режим history обеспечивает чистые URL без символа #, но требует настройки сервера для корректной обработки маршрутов. Режим hash более простой и не зависит от серверной конфигурации, но URL будет содержать символ #.

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

Quasar и Vue Router поддерживают динамические сегменты URL для передачи параметров:

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

Использование props: true позволяет передавать параметр id как свойство компонента, упрощая доступ к нему внутри UserProfile.vue через this.id.

Навигация между страницами

Навигация осуществляется с помощью компонента <router-link> или программно через объект маршрутизатора:

<router-link :to="{ name: 'about' }">О нас</router-link>
this.$router.push({ name: 'home' });

Для перехода без добавления записи в историю браузера используется метод replace:

this.$router.replace({ name: 'home' });

Защита маршрутов и middleware

Quasar позволяет использовать навигационные guards для проверки доступа к маршруту:

Router.beforeEach((to, from, next) => {
  const requiresAuth = to.meta.requiresAuth;
  const isAuthenticated = Boolean(localStorage.getItem('user'));

  if (requiresAuth && !isAuthenticated) {
    next({ name: 'login' });
  } else {
    next();
  }
});

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

Lazy Loading и Code Splitting

Ленивая загрузка страниц через динамический импорт — рекомендуемая практика в Quasar для уменьшения объема основного бандла:

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

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

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

Quasar поддерживает использование layouts, что позволяет создавать единый каркас приложения с боковым меню, шапкой или футером. Вложенные маршруты размещаются внутри компонента layout через <router-view>:

{
  path: '/admin',
  component: () => import('layouts/AdminLayout.vue'),
  children: [
    { path: '', component: () => import('pages/admin/Dashboard.vue'), name: 'admin-dashboard' },
    { path: 'users', component: () => import('pages/admin/Users.vue'), name: 'admin-users' }
  ]
}

Каждое вложение рендерится внутри AdminLayout.vue, сохраняя общий интерфейс для всех страниц раздела администрирования.

Обработка ошибок маршрутизации

Для обработки ошибок навигации и 404 страниц Quasar рекомендует добавлять маршрут «catch-all»:

{
  path: '/:catchAll(.*)*',
  component: () => import('pages/Error404.vue')
}

Это гарантирует корректное отображение страницы ошибки при вводе неизвестного URL и предотвращает падение SPA.

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

При использовании Vuex или Composition API маршруты могут взаимодействовать с состоянием приложения для управления видимостью страниц, доступом к данным и настройкой заголовков:

import { useStore } from 'vuex';
import { onBeforeRouteEnter } from 'vue-router';

export default {
  setup() {
    const store = useStore();

    onBeforeRouteEnter((to, from, next) => {
      if (!store.state.user.isAuthenticated) {
        next({ name: 'login' });
      } else {
        next();
      }
    });
  }
}

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

Выводы по структуре

  • Маршруты хранятся в routes.js, основной конфиг — в index.js.
  • Использование layouts и вложенных маршрутов упрощает поддержку сложных интерфейсов.
  • Динамические маршруты и props позволяют удобно передавать параметры.
  • Guards и middleware обеспечивают защиту страниц и контроль доступа.
  • Ленивые загрузки повышают производительность за счет code splitting.

Интеграция Vue Router в Quasar позволяет построить масштабируемое SPA и управлять навигацией в крупных приложениях с минимальной конфигурацией и высокой производительностью.

Оглавление