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

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

Методы программной навигации

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

  • this.$router.push() — добавляет новый маршрут в историю браузера и выполняет переход.

    this.$router.push({ name: 'home' });
this.$router.push({ path: '/profile/123' });

    Можно передавать объект с параметрами:

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

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

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

  • this.$router.go() — позволяет перемещаться по истории браузера.

    this.$router.go(-1); // назад на одну страницу
this.$router.go(2);  // вперед на две страницы

Навигация с асинхронными данными

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

async fetchDataAndNavigate() {
  try {
    const data = await api.getUserData();
    if (data.isAdmin) {
      this.$router.push({ name: 'adminDashboard' });
    } else {
      this.$router.push({ name: 'userDashboard' });
    }
  } catch (err) {
    console.error(err);
    this.$router.push({ name: 'errorPage' });
  }
}

Использование async/await обеспечивает последовательное выполнение операций и гарантирует, что навигация произойдет только после получения данных.

Передача параметров и query

При программной навигации часто необходимо передавать параметры маршрута или query-параметры:

  • Параметры маршрута (params) — применяются для динамических сегментов пути.

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

    В роутере путь должен быть настроен как /profile/:userId.

  • Query-параметры — передаются через URL после ?.

    this.$router.push({ path: '/search', query: { q: 'vue' } });

    На странице /search?q=vue их можно получить через this.$route.query.q.

Навигация с использованием Composition API

В Quasar с Vue 3 удобно использовать useRouter из Composition API:

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function goToProfile(userId) {
      router.push({ name: 'profile', params: { userId } });
    }

    return { goToProfile };
  }
}

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

Навигация с обработкой ошибок

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

this.$router.push({ name: 'nonExistent' }).catch(err => {
  console.warn('Ошибка навигации:', err);
});

Переход по абсолютному или относительному пути

  • Абсолютный путь — начинается с /, игнорирует текущий маршрут.

    this.$router.push('/dashboard');

  • Относительный путь — строится относительно текущего маршрута.

    this.$router.push('settings'); // если текущий путь /dashboard, перейдет на /dashboard/settings

Использование навигации внутри Quasar-компонентов

Многие компоненты Quasar поддерживают навигацию через проп to, аналогично <router-link>:

<q-btn label="Профиль" :to="{ name: 'profile', params: { userId: 123 } }" />
<q-item clickable :to="{ path: '/settings' }">Настройки</q-item>

Программная навигация позволяет управлять переходами там, где декларативное использование to невозможно, например, после выполнения сложной логики или в колбэках событий.

Навигация с сохранением состояния

Quasar и Vue Router позволяют передавать состояние вместе с маршрутом через state:

this.$router.push({ name: 'checkout', state: { cart: currentCart } });

Доступ к состоянию на новой странице осуществляется через window.history.state или через this.$route.state.

Защищённые маршруты и навигация

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

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next({ name: 'login' });
  } else {
    next();
  }
});

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

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

  • Использовать push для обычной навигации, replace — для редиректов.
  • Всегда обрабатывать возможные ошибки .catch(), чтобы предотвратить исключения.
  • Использовать параметры маршрута (params) для динамических сегментов и query-параметры для фильтров и поисковых запросов.
  • Применять Composition API (useRouter) для функций, вынесенных за пределы компонентов.
  • Комбинировать программную и декларативную навигацию для максимальной гибкости интерфейса.

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

Оглавление