Как работать с Vue 3 Router

Vie Cli – фреймворк для быстрого создания бэкенда сайта, а Vue Router – инструмент для создания маршрутизации внутри этого сайта. В теории можно обойтись и без него, но тогда вам придется оперировать статичными адресами страниц, что крайне неудобно; любая версия Vue Router позволяет воспринимать адреса страниц как переменные (объекты), что позволяет проводить сложную настройку маршрутов в зависимости от действий пользователя на странице – или, например, в одну строчку отловить все переходы на несуществующие страницы как в многостраничных, так и в одностраничных приложениях. Ниже – основы работы с компонентом фреймворка JavaScript Vue 3 Router (версия, пришедшая за Vue 2) и примеры кода.

Интегрируем Router в проект

Мы предполагаем, что вы уже знакомы с Vue и имеете проект, на котором можете тестировать Router. Перейдите в папку своего проекта в IDE и введите:

npm install vue-router@next --save

IDE скачает и установит Router в папку проекта. Теперь нам нужно создать структуру дерева файлов, с которой нам будет удобно работать. Технически этот шах можно пропустить, но если вы сгрузите все компоненты в одном месте – вы быстро в них запутаетесь. Создайте каталог src, в котором создайте еще 3 каталога:

• views. Здесь будут храниться страницы, созданные фреймворком Vue.
• router. Тут будет храниться маршрутизатор.
• components. Здесь вы будете описывать все компоненты, добавляемые на страницы – меню, например.

Теперь осталось только создать роутер, который мы затем подключим к main.js:

import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{ },
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;

createWebHistory() – это метод, который позволяет получить доступ к кнопкам «Назад» и «Вперед» в журнале браузера. Его нужно передать в поле «history» объекта, чтобы функция заработала. Поле «routes» – это массив, в котором будут храниться наши маршруты.

Теперь создаем приложение – и маршрутизатор подключен:

import { createApp } from 'vue';
createApp(App).use(router).mount('#app');

Создаем пути к страницам

По соглашению все страницы хранятся в каталоге views. Создадим 2 страницы-плейсхолдера для демонстрации – HomeTest и UsersTest.

HomeTest.vue:

<template>
<h2>HomeTest</h2>
</template>

UsersTest.vue:

<template>
<h2>UsersTest</h2>
</template>

Теперь нам нужно вернуться в роутер и показать ему, что у нас появились новые страницы. Массив маршрутов у нас вынесен в константу для удобства. Каждый путь – это объект, который имеет 2 поля:

• path. Путь к странице в URL сайта. Если у нас есть сайт test.ru, и для страницы мы указываем path «/sravni», то итоговый адрес страницы будет test.ru/sravni
• component. Путь к файлу страницы относительно папки views.

Добавляем наши 2 страницы в маршрутизатор:

const routes = [
{
path: '/',
component: HomeTest
},
{
path: '/user',
component: UsersTest
}
]

Осталось только подключить отображение контента на основе маршрутизатора. Для этого Vue предлагает встроенный компонент router-view/, который достаточно прописать в App.vue:

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

Связываем пути

Поскольку наши страницы теперь хранятся в виде vue-файлов, получить к ним доступ через <a href> проблематично – у нас нет html-страниц в момент написания кода. Проблему решает специальный тэг, который предлагает Vue:

<router-link to="/relative_path">SomeText</router-link>

Если мы, например, добавим в App.vue такой код:

<template>
<div>
<router-link to="/">Home</router-link> |
<router-link to="/user">Users</router-link>
</div>
<router-view/>
</template>

, то в верхней части страницы мы получим блок div с двумя ссылками на страницы. Если вы посмотрите исходный код страницы, то увидите, что router-link преобразовался в обычные <a href>.

Выше мы показали статичные ссылки, но есть еще и динамические – они крайне удобны для многостраничников. Реализованы динамические ссылки через поле name объекта маршрута. Вернемся в наш роутер и добавим имена маршрутам:

const routes = [
{
path: '/',
name: 'HomeLink',
component: HomeTest
},
{
path: '/user',
name: 'UsersLink',
component: UsersTest
}
]

Теперь мы можем использовать в App.vue динамические имена, вызывая страницу по имени:

<template>
<div>
<router-link :to="{ name: 'HomeLink' }">Home</router-link> |
<router-link :to="{ name: 'UsersLink' }">Users</router-link>
</div>
<router-view/>
</template>

Перенаправление

Последняя функция, которую мы рассмотрим в рамках гайда для начинающих – перенаправление с одного адреса внутри сайта на другой. Для того, чтобы его настроить, нам нужно создать новый объект в маршрутизаторе, формат объекта:

{
path: '/oldPath',
redirect: '/newPath'
}

, где в поле path указывается старый путь, в поле redirect указывается новый путь. Предположим, раньше у нас была страница «Members», которую мы затем заменили на «User». В маршрутизаторе мы прописываем редирект – и все, кто пытается зайти на страницу /members, попадает на страницу /user:

const routes = [
{
path: '/',
name: 'Home',
component: HomePage
},
{
path: '/user',
name: 'Users',
component: UsersPage
},
{
path: '/members',
redirect: '/user'
}
]

Отлов 404

Небольшой бонус – Vue 3 Router позволяет автоматически отлавливать любые неправильные URL, введенные пользователем, и отправлять его на универсальную страницу 404. Сама страница 404 создается так же, как и все остальные – создайте и заполните ее в «routes». Затем пропишите в маршрутизаторе следующий объект в массиве:

{
path: '/:catchAll(.*)',
name: 'NotFound',
component: NotFound
}

Vue позволяет использовать функцию catchAll, которая перехватывает все запросы, мы передаем функции регулярное выражение, под которое подходит вообще любой ввод, кроме пустого – за счет этого перехват и работает. Этот объект должен быть в массиве последним – любые объекты, которые будут идти после него, будут проигнорированы, потому что catchAll с таким фильтром перехватит любой запрос (в Vue Router страницы ищутся по запросу сверху вниз по массиву).

Кратко о главном

• Vue 3 router позволяет создать маршрутизатор – утилиту, которая хранит все пути всех страниц на сайте.
• Чтобы подключить маршрутизатор, вам нужно сначала скачать Router через консоль, затем подключить сам роутер к проекту.
• У Router – много функций, основные: создание путей, перелинковка, быстрый доступ ко всему массиву путей на сайте, перенаправление, отлов адресов по фильтру.