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

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

Каждый маршрут представляет собой объект с ключами:

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

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

const routes = [
  {
    path: '/',
    component: () => import('pages/IndexPage.vue'),
    name: 'home'
  },
  {
    path: '/about',
    component: () => import('pages/AboutPage.vue'),
    name: 'about'
  }
]

Программная навигация

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

  • this.$router.push() — добавляет новый маршрут в историю браузера.
  • this.$router.replace() — заменяет текущий маршрут без добавления новой записи в историю.
  • this.$router.go(n) — перемещает пользователя на n шагов вперед или назад в истории.

Пример перехода к странице по имени:

this.$router.push({ name: 'about' })

Можно также передавать параметры через объект params или query-параметры через query:

this.$router.push({ name: 'profile', params: { userId: 123 } })
this.$router.push({ path: '/search', query: { q: 'Quasar' } })

Навигация с помощью компонентов Quasar

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

q-btn и to

Компонент кнопки q-btn может быть использован для перехода на другой маршрут с помощью свойства to:

<q-btn label="Перейти на About" :to="{ name: 'about' }" />

to поддерживает как объект маршрута, так и строку с путем:

<q-btn label="Главная" to="/" />

q-route-tab

Для создания вкладок с навигацией удобно использовать компонент q-route-tab. Он автоматически выделяет активную вкладку на основе текущего маршрута.

<q-tabs v-model="tab" class="text-grey bg-white">
  <q-route-tab to="/" name="home" label="Главная" />
  <q-route-tab to="/about" name="about" label="О проекте" />
</q-tabs>

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

Маршруты могут содержать динамические сегменты, обозначаемые двоеточием :. Они позволяют передавать параметры через URL.

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

В компоненте параметр можно получить через this.$route.params.id. Для реактивного отслеживания изменений маршрута применяется watch на $route.

watch: {
  '$route.params.id'(newId) {
    this.fetchUserData(newId)
  }
}

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

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

{
  path: '/dashboard',
  component: () => import('layouts/DashboardLayout.vue'),
  children: [
    { path: '', component: () => import('pages/DashboardHome.vue') },
    { path: 'settings', component: () => import('pages/DashboardSettings.vue') }
  ]
}

При использовании вложенных маршрутов важно размещать <router-view /> в компоненте родителя для отображения дочерних страниц.

Навигационные гварды

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

  • Глобальный гвард:
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next({ name: 'login' })
  } else {
    next()
  }
})
  • Пер-роут гвард задается прямо в объекте маршрута:
{
  path: '/admin',
  component: () => import('pages/Admin.vue'),
  meta: { requiresAuth: true },
  beforeEnter: (to, from, next) => {
    if (!isAdmin()) next({ name: 'home' })
    else next()
  }
}
  • Пер-компонент гвард реализуется с помощью хуков жизненного цикла, таких как beforeRouteEnter, beforeRouteUpdate и beforeRouteLeave.

Lazy Loading и код-сплиттинг

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

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

Lazy loading также может использоваться совместно с вложенными маршрутами и динамическими параметрами.

Работа с query-параметрами и состоянием

URL-параметры и query-параметры автоматически доступны через $route.params и $route.query. Для сохранения состояния при навигации удобно использовать props: true:

{
  path: '/post/:id',
  component: () => import('pages/Post.vue'),
  props: true
}

Внутри компонента Post.vue:

props: ['id']

Это делает компонент более чистым, так как доступ к параметрам не зависит от $route.

Использование scroll-behavior

Quasar позволяет управлять поведением прокрутки при смене маршрута через scrollBehavior в файле маршрутизатора:

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) return savedPosition
  return { left: 0, top: 0 }
}

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

Итоговое представление

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

Оглавление