Навигация вперед и назад

Vue Router предоставляет удобные механизмы для управления историей переходов в приложении. Основной объект для работы с историей — это экземпляр маршрутизатора, который позволяет управлять переходами, откатами и повторными переходами.

Объект истории и методы навигации

При создании маршрутизатора с использованием createRouter необходимо указать тип истории: createWebHistory, createWebHashHistory или createMemoryHistory. История определяет, как браузер будет обрабатывать навигацию. Например:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

Экземпляр router предоставляет методы для программной навигации:

router.push(location) — добавляет новый маршрут в стек истории и инициирует переход.
router.replace(location) — заменяет текущий маршрут, не создавая новой записи в истории.
router.back() — возвращается на предыдущий маршрут, аналогично кнопке «Назад» браузера.
router.forward() — переходит вперед в истории, аналогично кнопке «Вперед» браузера.
router.go(n) — перемещается на n шагов по истории (отрицательное число — назад, положительное — вперед).

Пример использования:

methods: {
  goBack() {
    this.$router.back();
  },
  goForward() {
    this.$router.forward();
  },
  goToAbout() {
    this.$router.push('/about');
  },
  replaceWithHome() {
    this.$router.replace('/');
  }
}

Управление историей с учетом состояния

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

router.push({ 
  path: '/about', 
  state: { scrollY: window.scrollY } 
});

Для получения состояния можно использовать объект history.state:

const state = window.history.state;
console.log(state.scrollY);

Обработчики переходов и хуки

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

beforeEach(to, from, next) — вызывается перед каждым переходом.
beforeResolve(to, from, next) — вызывается после beforeEach, перед завершением перехода.
afterEach(to, from) — вызывается после завершения перехода.

Использование:

router.beforeEach((to, from, next) => {
  console.log(`Переход с ${from.fullPath} на ${to.fullPath}`);
  next();
});

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

Хранение позиции скролла

Vue Router автоматически поддерживает сохранение позиции скролла при навигации назад и вперед. Для этого используется опция scrollBehavior при создании маршрутизатора:

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition; // Возврат к предыдущей позиции
    } else {
      return { top: 0 }; // Прокрутка в начало страницы
    }
  }
});

scrollBehavior получает три аргумента:

to — объект маршрута назначения.
from — объект маршрута источника.
savedPosition — позиция скролла, сохранённая браузером (при переходе назад/вперед).

Особенности при использовании `keep-alive`

Если маршруты оборачиваются в <keep-alive>, при навигации назад компоненты могут не уничтожаться, а сохраняться в памяти. В этом случае восстановление состояния и позиционирования скролла происходит автоматически, но рекомендуется дополнительно проверять savedPosition для точного восстановления.

Программная навигация с параметрами

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

router.push({ name: 'User', params: { id: 123 }, query: { tab: 'info' } });
router.back();

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

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

Если страницы загружают данные асинхронно, стоит учитывать, что при возврате назад состояние может быть уже закэшировано или требовать повторной загрузки. В таких случаях используют комбинацию хуков beforeRouteEnter и beforeRouteUpdate для повторной инициализации данных:

beforeRouteEnter(to, from, next) {
  fetchData(to.params.id).then(data => {
    next(vm => vm.setData(data));
  });
},
beforeRouteUpdate(to, from, next) {
  fetchData(to.params.id).then(data => {
    this.setData(data);
    next();
  });
}

Это гарантирует корректную работу навигации вперед и назад с динамическим содержимым.