Отличия Vue Router 3 от Vue Router 4

Vue Router 4 является полной переработкой маршрутизатора для Vue 3 и отличается от Vue Router 3 как синтаксисом, так и концепциями работы с маршрутизацией. Основные изменения касаются совместимости с Composition API, нового подхода к маршрутам и способа управления историей браузера.

Создание экземпляра маршрутизатора

В Vue Router 3 маршрутизатор создавался через new VueRouter({ routes }) и передавался в экземпляр Vue:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  mode: 'history',
  routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

В Vue Router 4 создаётся новый экземпляр через функцию createRouter и используется объект истории createWebHistory или createWebHashHistory:

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

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

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

export default router;

Ключевые изменения:

  • Использование createRouter вместо new VueRouter.
  • История маршрутов вынесена в отдельный объект, что позволяет легче интегрировать серверный рендеринг и тестирование.
  • Vue.use(VueRouter) больше не нужен, так как маршрутизатор напрямую интегрируется в приложение через app.use(router).

Интеграция с приложением Vue 3

В Vue Router 4 маршрутизатор подключается к приложению следующим образом:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

Теперь маршрутизатор полностью соответствует архитектуре Vue 3 и Composition API.

Работа с маршрутами и навигация

В Vue Router 3 навигация происходила через методы $router.push, $router.replace и <router-link>:

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

В Vue Router 4 сохраняются те же методы, но добавлена поддержка Promise для навигации, что упрощает обработку ошибок:

import { useRouter } from 'vue-router';

const router = useRouter();
router.push('/about').catch(err => {
  if (err.name !== 'NavigationDuplicated') throw err;
});

Ключевые изменения:

  • NavigationDuplicated больше не выбрасывается автоматически при повторной навигации, теперь обработка ошибок через .catch.
  • Навигация через Composition API позволяет использовать useRouter() и useRoute() вместо $router и $route.

Доступ к текущему маршруту

В Vue Router 3:

this.$route.params.id;

В Vue Router 4 с Composition API:

import { useRoute } from 'vue-router';

const route = useRoute();
console.log(route.params.id);

Изменения:

  • useRoute() возвращает реактивный объект, что позволяет отслеживать изменения маршрута в реактивных вычислениях (computed) и эффектах (watch).
  • route.query и route.params теперь полностью совместимы с реактивной системой Vue 3.

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

Vue Router 4 сохраняет поддержку динамических маршрутов через :param и ленивой загрузки компонентов через defineAsyncComponent или динамический импорт:

const routes = [
  {
    path: '/user/:id',
    component: () => import('./components/User.vue')
  }
];

Особенности Vue Router 4:

  • Ленивые компоненты работают с Suspense из Vue 3.
  • Можно использовать props: true для автоматической передачи параметров маршрута в компонент:
{ path: '/user/:id', component: User, props: true }

Настройка переходов и Guards

Vue Router 4 сохранил beforeEach, beforeResolve и afterEach, но добавлена поддержка Composition API в маршрутах через beforeRouteEnter, beforeRouteUpdate и beforeRouteLeave:

import { onBeforeRouteUpdate } from 'vue-router';

export default {
  setup() {
    onBeforeRouteUpdate((to, from) => {
      console.log('Маршрут обновился', to.fullPath);
    });
  }
};
  • Эти хуки полностью реактивны и интегрированы в Composition API.
  • Глобальные и локальные guards могут использовать асинхронные функции, возвращая Promise.

Сравнение режимов истории

Vue Router 3 поддерживает режимы hash и history через mode. В Vue Router 4 для этого используются отдельные функции:

import { createWebHistory, createWebHashHistory } from 'vue-router';

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

const hashRouter = createRouter({
  history: createWebHashHistory(), // hash mode
  routes
});

Преимущества:

  • Чёткое разделение истории.
  • Улучшенная поддержка SSR и навигации через сервер.
  • Возможность кастомной истории через createMemoryHistory.

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

В Vue Router 3:

this.$router.push({ path: '/user', query: { id: 123 } });

В Vue Router 4:

router.push({ name: 'user', query: { id: 123 } });

Изменения:

  • Поддержка именованных маршрутов стала более удобной.
  • Query и params полностью реактивны.
  • Navigation failures теперь возвращают объект с type и error.

Итоги по ключевым отличиям

  • Интеграция с Composition API: useRouter, useRoute, реактивные guards.
  • История маршрутов вынесена в отдельные объекты (createWebHistory, createWebHashHistory).
  • Создание маршрутизатора через createRouter вместо new VueRouter.
  • Асинхронная навигация через Promise с возможностью обработки NavigationFailures.
  • Глобальные и локальные guards полностью совместимы с Composition API.
  • Более чистая архитектура для SSR и тестирования, благодаря отделению истории и маршрутизатора.

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

Оглавление