Обновление синтаксиса

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

Импорт и создание маршрутизатора

В новой версии маршрутизатор создается через функцию createRouter, а не через конструктор new VueRouter, как это было в Vue 2:

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;

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

  • Используется createWebHistory или createWebHashHistory вместо mode: 'history'/'hash'.
  • Массив маршрутов теперь просто передается в routes, без дополнительных параметров конструктора.
  • Возможность полностью использовать TypeScript благодаря строгой типизации параметров маршрута.

Настройка вложенных маршрутов

Вложенные маршруты теперь определяются через свойство children:

const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue'),
    children: [
      { path: '', component: () => import('./views/DashboardHome.vue') },
      { path: 'settings', component: () => import('./views/DashboardSettings.vue') }
    ]
  }
];

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

  • Подмаршруты наследуют путь родителя.
  • Использование component: () => import(...) позволяет динамически загружать компоненты, что уменьшает размер бандла и ускоряет начальную загрузку.

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

Новый синтаксис для динамических сегментов пути:

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

Доступ к параметрам теперь осуществляется через useRoute внутри компонента:

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = route.params.id;
    return { userId };
  }
};

Изменения против Vue 2:

  • Нет необходимости использовать $route напрямую в this.
  • Все параметры доступны реактивно через Composition API.

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

Вместо $router.push({ path: '/about' }) сохраняется синтаксис, но с поддержкой промисов:

import { useRouter } from 'vue-router';

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

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

    return { goToAbout };
  }
};

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

  • push и replace возвращают промис, что позволяет обрабатывать ошибки навигации.
  • Ошибка NavigationDuplicated теперь отлавливается стандартным try/catch или с помощью onError.

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

Синтаксис обновился с использованием функций вместо методов экземпляра:

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

Дополнительные возможности:

  • Локальные охранники в компонентах через beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave работают как раньше, но полностью совместимы с Composition API.
  • Метаданные маршрута (meta) используются для управления доступом, логикой отображения меню и других условий.

Lazy Loading и динамические импорты

Vue Router 4 активно поддерживает ленивую загрузку компонентов:

const routes = [
  { path: '/profile', component: () => import('./views/Profile.vue') }
];

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

  • Компонент загружается только при переходе по маршруту.
  • Уменьшается основной размер JavaScript-бандла.
  • Позволяет использовать Webpack chunk naming:
component: () => import(/* webpackChunkName: "profile" */ './views/Profile.vue')

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

В новой версии промисы push и replace позволяют централизованно обрабатывать ошибки:

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

Это упрощает работу с одинаковыми маршрутами, исключая ненужные ошибки.

Резюме синтаксических изменений

  • Создание маршрутизатора через createRouter и истории через createWebHistory/createWebHashHistory.
  • Динамическая загрузка компонентов через import() и ленивый рендеринг.
  • Полная поддержка Composition API через useRouter и useRoute.
  • Промисы для навигации и централизованная обработка ошибок.
  • Метаданные маршрутов и охранники полностью интегрированы с новым синтаксисом.

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

Оглавление