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

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

Использование метода router.push

Метод router.push используется для перехода на указанный маршрут. Он принимает объект или строку. Основные варианты использования:

// Переход по имени маршрута
this.$router.push({ name: 'home' });

// Переход с параметрами
this.$router.push({ name: 'user', params: { id: 123 } });

// Переход по пути
this.$router.push('/about');

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

  • При переходе по пути с динамическими параметрами params можно использовать только при указании name маршрута.
  • Метод возвращает промис, который позволяет обрабатывать успешный переход или ошибки навигации:
this.$router.push({ name: 'user', params: { id: 123 } })
  .then(() => console.log('Навигация успешна'))
  .catch(err => console.error(err));

Метод router.replace

Метод router.replace аналогичен push, но не добавляет новый элемент в историю браузера. Это полезно для ситуаций, когда не требуется возвращаться на предыдущий маршрут.

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

Использование replace удобно для редиректов после авторизации или завершения формы.

Переход с сохранением состояния

Можно передавать объект state через router.push и router.replace, что позволяет сохранять данные между маршрутами без использования глобального состояния или Vuex.

this.$router.push({ name: 'dashboard', state: { from: 'login' } });

Доступ к state осуществляется через history.state:

console.log(window.history.state);

Навигация с query-параметрами

Query-параметры позволяют передавать данные через URL:

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

В компоненте они доступны через объект this.$route.query:

console.log(this.$route.query.q); // "vue"

Использование query удобно для фильтров, поиска и других динамических данных.

Навигационные охранники (Navigation Guards)

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

Пример глобального охранника:

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

Локальный охранник в компоненте:

export default {
  beforeRouteEnter(to, from, next) {
    if (!isAuthorized()) {
      next({ name: 'login' });
    } else {
      next();
    }
  }
};

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

Навигация с программным скроллингом

При переходе между маршрутами можно управлять положением прокрутки страницы:

const router = new VueRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
});

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

Асинхронная навигация

Методы push и replace поддерживают асинхронные операции. Например, можно дождаться загрузки данных перед переходом:

async function goToProfile(id) {
  const exists = await checkUserExists(id);
  if (exists) {
    router.push({ name: 'profile', params: { id } });
  } else {
    router.push({ name: 'notfound' });
  }
}

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

Обработка ошибок навигации

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

router.push({ name: 'home' })
  .catch(err => {
    if (err.name !== 'NavigationDuplicated') {
      console.error(err);
    }
  });

Ошибка NavigationDuplicated возникает при повторном переходе на текущий маршрут и не требует реакции со стороны приложения.

Резюме ключевых моментов

  • router.push и router.replace позволяют управлять маршрутами через код.
  • Query-параметры и params дают гибкость в передаче данных.
  • Навигационные охранники обеспечивают контроль доступа и проверку состояния.
  • Асинхронные переходы и управление скроллом повышают удобство пользователя.
  • Обработка ошибок и дублирующихся переходов предотвращает сбои в работе приложения.

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

Оглавление