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

Маршрутизация в Quasar строится поверх Vue Router, что обеспечивает тесную интеграцию с экосистемой Vue.js. Основной объект маршрутизации создается в файле src/router/routes.js или src/router/index.js, в зависимости от структуры проекта. Маршруты определяются как массив объектов с ключевыми свойствами: path, component, name, meta и children.

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/IndexPage.vue'), name: 'home' },
      { path: 'about', component: () => import('pages/AboutPage.vue'), name: 'about' }
    ]
  },
  {
    path: '/login',
    component: () => import('pages/LoginPage.vue'),
    name: 'login'
  },
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue')
  }
]

export default routes

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

  • path определяет URL, по которому будет доступен маршрут.
  • component указывает компонент, который будет отображен при переходе по маршруту. Использование ленивой загрузки через import() уменьшает первоначальный размер бандла.
  • children позволяет создавать вложенные маршруты, которые отображаются внутри <router-view> родительского компонента.
  • meta используется для хранения произвольных данных маршрута, например, прав доступа или названия страницы.

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

Quasar поддерживает динамические сегменты URL с помощью двоеточия (:). Они позволяют передавать параметры в компоненты.

{
  path: '/user/:id',
  component: () => import('pages/UserProfile.vue'),
  name: 'user-profile',
  props: true
}
  • :id — динамический сегмент, доступный в компоненте через props или через $route.params.id.
  • Установка props: true автоматически передает параметры маршрута как свойства в компонент.
  • Можно использовать регулярные выражения для ограничения формата параметров: /user/:id(\\d+) — только цифры.

Глубокие вложенные маршруты

Для сложных приложений часто требуется несколько уровней вложенных маршрутов:

{
  path: '/dashboard',
  component: () => import('layouts/DashboardLayout.vue'),
  children: [
    {
      path: 'analytics',
      component: () => import('pages/dashboard/Analytics.vue'),
      children: [
        { path: 'daily', component: () => import('pages/dashboard/analytics/Daily.vue') },
        { path: 'monthly', component: () => import('pages/dashboard/analytics/Monthly.vue') }
      ]
    }
  ]
}
  • Каждый уровень вложенности должен соответствовать <router-view> в родительском компоненте.
  • Метки name помогают строить навигацию с использованием router.push({ name: 'route-name' }).
  • Вложенные маршруты позволяют создавать комплексные интерфейсы с панелями, вкладками и модальными окнами.

Метаданные маршрутов

Объект meta служит для хранения дополнительных данных:

{
  path: '/admin',
  component: () => import('pages/Admin.vue'),
  meta: { requiresAuth: true, role: 'admin' }
}
  • requiresAuth можно использовать в navigation guards для проверки авторизации перед переходом.
  • role позволяет реализовать контроль доступа по ролям пользователей.
  • Любые пользовательские свойства в meta доступны через $route.meta.

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

Quasar использует стандартные методы Vue Router:

this.$router.push({ name: 'about' })
this.$router.replace('/login')
this.$router.go(-1)
  • push добавляет новый маршрут в историю браузера.
  • replace заменяет текущий маршрут без добавления в историю.
  • go(n) позволяет перемещаться по истории назад или вперед.

Lazy-loading и разделение кода

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

{
  path: '/settings',
  component: () => import('pages/Settings.vue')
}
  • Webpack автоматически создаёт отдельный чанк для этого компонента.
  • Это сокращает время начальной загрузки и повышает производительность SPA.

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

Navigation guards позволяют выполнять проверки перед переходом на маршрут:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.getters.isLoggedIn) {
    next({ name: 'login' })
  } else {
    next()
  }
})
  • beforeEach срабатывает перед каждым переходом.
  • next() управляет продолжением навигации.
  • Можно реализовать проверки авторизации, загрузку данных или отмену перехода.

Поддержка 404 и перенаправлений

Для обработки неизвестных маршрутов используется “catch-all”:

{
  path: '/:catchAll(.*)*',
  component: () => import('pages/ErrorNotFound.vue')
}
  • Любой URL, не совпадающий с существующими маршрутами, попадет на этот компонент.
  • Перенаправления можно настроить через redirect:
{ path: '/home', redirect: '/' }
  • Это удобно при изменении структуры приложения или устаревших ссылках.

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

Оглавление