Создание первого роутера

Для начала работы с Vue Router необходимо установить библиотеку через пакетный менеджер. В проектах на Vue 3 используется следующая команда:

npm install vue-router@4

После установки создаётся конфигурация маршрутов. Маршрут — это объект, который связывает URL с конкретным компонентом.

import { createRouter, createWebHistory } from 'vue-router';
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
});

export default router;

Объяснение ключевых параметров:

  • createRouter — функция для создания экземпляра роутера.
  • history — способ хранения истории переходов. createWebHistory() использует HTML5 History API, позволяя делать чистые URL без хэшей.
  • routes — массив объектов маршрутов, каждый из которых содержит path и component.

Подключение роутера к приложению

Чтобы роутер начал работать, его необходимо интегрировать в главный экземпляр приложения Vue:

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

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

Метод app.use(router) подключает роутер ко всему приложению, после чего компоненты <router-view> начинают отображать текущий маршрут.

  • <router-view> — динамическая область, куда подгружается компонент, соответствующий текущему маршруту.
  • <router-link> — элемент для навигации между маршрутами, который автоматически использует pushState для обновления URL:
<template>
  <nav>
    <router-link to="/">Главная</router-link>
    <router-link to="/about">О проекте</router-link>
  </nav>
  <router-view></router-view>
</template>

to может быть строкой (URL) или объектом с более детальной конфигурацией, например, указанием параметров:

<router-link :to="{ name: 'user', params: { id: 123 }}">Профиль</router-link>

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

Именование маршрутов упрощает ссылку на них и использование динамических параметров.

const routes = [
  { path: '/user/:id', name: 'user', component: User }
];

В таком случае можно переходить с помощью:

router.push({ name: 'user', params: { id: 42 } });

Динамические параметры и реквизиты

Маршруты могут содержать переменные, которые передаются компоненту через props. Это удобно для изолированного тестирования и повторного использования:

const routes = [
  {
    path: '/profile/:id',
    component: Profile,
    props: true
  }
];

Внутри компонента Profile параметр доступен напрямую через props:

export default {
  props: ['id'],
  mounted() {
    console.log('ID пользователя:', this.id);
  }
}

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

Vue Router позволяет создавать вложенные маршруты для сложных приложений.

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: '', component: Overview },
      { path: 'settings', component: Settings }
    ]
  }
];

В родительском компоненте Dashboard нужно использовать <router-view> для отображения дочерних компонентов.

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

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

const About = () => import('./components/About.vue');

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

Ленивая загрузка снижает первоначальный размер бандла и ускоряет загрузку страницы.

Навигационные охранники

Навигационные охранники (navigation guards) позволяют контролировать переход между маршрутами:

router.beforeEach((to, from, next) => {
  if (to.path === '/admin' && !isLoggedIn()) {
    next('/');
  } else {
    next();
  }
});
  • beforeEach вызывается перед каждым переходом.
  • next() разрешает переход, при необходимости можно передавать URL для редиректа.

Работа с режимом истории и хэшей

Vue Router поддерживает два основных режима:

  • createWebHistory() — чистые URL без #.
  • createWebHashHistory() — URL с хэшем (например, /about#section), используется в приложениях без серверной поддержки маршрутизации.

Выбор режима зависит от настроек сервера и требований к SEO.

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

Помимо <router-link>, навигацию можно выполнять программно через экземпляр роутера:

this.$router.push('/about');
this.$router.replace({ name: 'home' });
  • push добавляет запись в историю браузера.
  • replace заменяет текущую запись, что удобно для редиректов.

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

  • Создание маршрутов с компонентами, динамическими параметрами и именами.
  • Вложенные маршруты для структурированных приложений.
  • Ленивая загрузка компонентов для оптимизации производительности.
  • Навигационные охранники для контроля доступа.
  • Гибкая работа с историей браузера и программной навигацией.

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

Оглавление