Определение маршрутов

Маршрутизация — один из ключевых компонентов архитектуры одностраничных приложений (SPA) во Vue.js. Она позволяет управлять переходами между различными компонентами, обеспечивая динамическую загрузку контента без перезагрузки страницы. Для реализации маршрутов используется библиотека Vue Router, официальное решение для маршрутизации в экосистеме Vue.

Установка и подключение Vue Router

Для работы с Vue Router необходимо установить пакет через npm:

npm install vue-router@next

Подключение к приложению Vue выполняется через создание экземпляра маршрутизатора и интеграцию его в корневой объект приложения:

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

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

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

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

Ключевые моменты:

  • createRouter создает экземпляр маршрутизатора.
  • createWebHistory используется для использования HTML5 History API, обеспечивая чистые URL без хеша (#).
  • Массив routes определяет соответствие URL и компонентов.

Определение маршрутов

Маршрут описывается объектом с обязательным свойством path и component. Дополнительно можно использовать:

  • name — уникальное имя маршрута, позволяющее обращаться к нему программно.
  • props — передача параметров в компонент через маршрутизатор.
  • redirect — перенаправление на другой путь.
  • children — вложенные маршруты для реализации многоуровневой навигации.

Пример маршрутов с именами и параметрами:

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/user/:id',
    name: 'user',
    component: () => import('./components/User.vue'),
    props: true
  },
  {
    path: '/about',
    redirect: '/'
  }
];

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

  • Использование :id позволяет динамически захватывать параметры из URL.
  • props: true автоматически передает параметр id в компонент как проп.
  • Асинхронная загрузка компонентов через import() уменьшает размер начального бандла и ускоряет загрузку приложения.

Вложенные маршруты

Вложенные маршруты позволяют создавать многоуровневую структуру приложения. Для этого используется свойство children:

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: '', component: DashboardHome },
      { path: 'settings', component: DashboardSettings },
      { path: 'profile', component: DashboardProfile }
    ]
  }
];

Особенности работы:

  • Пустой путь '' в дочернем маршруте соответствует отображению компонента по умолчанию.
  • Вложенные маршруты отображаются через <router-view> внутри родительского компонента.

Навигация между маршрутами

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

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

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

Компонентная навигация:

<router-link :to="{ name: 'about' }">О сайте</router-link>

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

  • Автоматическое управление активным классом для текущего маршрута.
  • Поддержка SPA-переходов без перезагрузки страницы.

Защита маршрутов и навигационные охранники

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

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

Ключевые точки:

  • beforeEach — глобальный охранник перед каждым переходом.
  • meta — пользовательские данные маршрута, например, requiresAuth.
  • next() — управление продолжением или перенаправлением маршрута.

Работа с динамическими маршрутами

Динамические маршруты позволяют создавать страницы, параметры которых зависят от URL. Пример:

const routes = [
  { path: '/product/:productId', component: Product, props: true }
];

В компоненте Product:

export default {
  props: ['productId'],
  mounted() {
    fetchProduct(this.productId);
  }
};

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

  • Использование props упрощает тестирование и повторное использование компонента.
  • URL-параметры автоматически преобразуются в строки. При необходимости числовые значения нужно приводить вручную.

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

Vue Router позволяет управлять скроллом и режимом истории:

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition;
    return { top: 0 };
  }
});

Принципы работы scrollBehavior:

  • Возвращение { top: 0 } перемещает страницу вверх при каждом переходе.
  • savedPosition используется для возврата к предыдущей позиции при навигации назад/вперед.

Ленивая загрузка маршрутов

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

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

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

  • Начальная загрузка приложения сокращается.
  • Компоненты подгружаются только при необходимости.

Итоговые рекомендации по определению маршрутов

  • Каждый маршрут должен иметь уникальный path и предпочтительно name.
  • Использовать динамические параметры для страниц с контентом, зависящим от URL.
  • Вложенные маршруты требуют <router-view> в родительских компонентах.
  • Программная и компонентная навигация должны использоваться в зависимости от контекста.
  • Ленивая загрузка компонентов и scrollBehavior повышают производительность и удобство использования SPA.

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

Оглавление