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

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

Навигация по статье

Как работает маршрутизация в SPA

В традиционных веб-приложениях при переходе на новую страницу браузер перезагружает всю страницу и загружает новый HTML-файл. В одностраничных приложениях (SPA), которые мы создаём с Vue, всё происходит динамически. Vue Router просто меняет компоненты, которые рендерятся, на основе URL, не перегружая страницу.

Установка Vue Router

Первым шагом будет установка Vue Router в ваш проект. Если вы использовали Vite для создания вашего приложения (а это, скорее всего, так), просто установим его через npm:

npm install vue-router@next

Да-да, не забудьте добавить @next, чтобы установить версию для Vue 3.

Настройка Vue Router

После установки нам нужно подключить маршрутизатор к нашему приложению. Создадим файл router.js (или router.ts, если вы используете TypeScript).

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

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

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

export default router;

Здесь мы создаём маршрутизатор с двумя простыми маршрутами: / для главной страницы и /about для страницы «О нас». Компоненты Home и About будут рендериться в зависимости от того, по какому URL-адресу вы переходите.

Теперь нам нужно подключить маршрутизатор к приложению в файле main.js:

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

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

Теперь ваше приложение знает, как обрабатывать маршруты.

Базовая структура приложения с маршрутизацией

Давайте посмотрим, как это будет выглядеть в шаблоне нашего приложения. Нам нужно добавить специальный компонент <router-view>, который будет служить местом для рендеринга соответствующего компонента в зависимости от текущего маршрута.

<template>
  <div id="app">
    <nav>
      <router-link to="/">Главная</router-link>
      <router-link to="/about">О нас</router-link>
    </nav>

    <router-view></router-view>
  </div>
</template>

Здесь мы добавили два <router-link> — это такие же ссылки, как <a>, но они управляются Vue Router и не вызывают перезагрузку страницы. С помощью to указываем, к какому маршруту должна вести ссылка.

А компонент <router-view> отвечает за отображение нужного компонента, который связан с маршрутом. Например, если вы перейдёте на /about, в этом месте рендерится компонент About.

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

Что делать, если у вас есть, например, страница продукта, и вы хотите передавать динамические данные, такие как ID товара в URL? Для этого существует динамическая маршрутизация.

Пример маршрута с динамическим сегментом:

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

Здесь :id — это динамический сегмент, который может быть любым значением, например /product/123 или /product/abc. Теперь в компоненте Product мы можем получить это значение через объект route.

<template>
  <div>
    <h1>Продукт № {{ $route.params.id }}</h1>
  </div>
</template>

Таким образом, каждый раз, когда вы переходите на страницу /product/123, значение id будет доступно через $route.params.id.

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

Иногда вам нужно перенаправить пользователя на другую страницу программно, например, после успешного входа в систему. Vue Router предоставляет метод this.$router.push() для этого.

Пример:

methods: {
  goToHome() {
    this.$router.push('/');
  }
}

В этом случае при вызове метода goToHome пользователь будет перенаправлен на главную страницу.

Защита маршрутов

Теперь представьте, что у вас есть закрытые страницы, доступ к которым могут получить только авторизованные пользователи. Например, личный кабинет. Для этого можно использовать навигационные охранники (navigation guards).

Пример простой защиты маршрута:

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    beforeEnter: (to, from, next) => {
      if (isAuthenticated()) {
        next();
      } else {
        next('/login');
      }
    }
  }
];

Функция beforeEnter проверяет, авторизован ли пользователь. Если да, то она разрешает навигацию (next()), если нет — перенаправляет на страницу логина (next(‘/login’)).

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

Lazzy loading (ленивая загрузка)

Если у вас большое приложение, вы можете не загружать все компоненты сразу, а использовать ленивую загрузку, чтобы ускорить первоначальную загрузку.

Пример:

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

Теперь компонент About будет загружен только тогда, когда пользователь перейдёт на страницу «О нас». Это особенно полезно для крупных приложений.

Редиректы и alias

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

Редирект:

const routes = [
  { path: '/home', redirect: '/' }
];

Здесь любой переход на /home будет перенаправлен на /.

Alias:

const routes = [
  { path: '/profile', component: Profile, alias: '/user' }
];

Теперь и по пути /profile, и по /user будет рендериться один и тот же компонент Profile.

Дальше мы рассмотрим тему управление состоянием с Pinia.