Как работает Vue Router и как настраиваются маршруты?

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

Установка

Для Vue 3:

npm install vue-router@4

Затем импорт и регистрация в main.js или main.ts:

import { createApp } from 'vue';
import App from './App.vue';
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
});
const app = createApp(App);
app.use(router);
app.mount('#app');

Структура маршрутов

Каждый маршрут — это объект в массиве routes:

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

Основные поля маршрута:

  • path: URL-путь, с которым должен сопоставляться маршрут.

  • name: (опционально) имя маршрута — используется для навигации по имени.

  • component: компонент, который будет отображён при переходе.

  • children: вложенные маршруты.

  • props: можно передавать параметры как props в компонент.

Использование маршрутов

Ссылки на маршруты

Используется компонент <router-link> вместо обычного <a>:

&lt;router-link to="/"&gt;На главную&lt;/router-link&gt;
&lt;router-link to="/about"&gt;О нас&lt;/router-link&gt;

Можно использовать навигацию программно:

this.$router.push('/about');
this.$router.push({ name: 'About' });

Отображение маршрута

Компонент <router-view> указывает место, куда будет рендериться компонент текущего маршрута:

&lt;template&gt;
&lt;div&gt;
&lt;Header /&gt;
&lt;router-view /&gt;
&lt;Footer /&gt;
&lt;/div&gt;
&lt;/template&gt;

История маршрутизации

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

createWebHistory() // Использует HTML5 History API (чистые URL)
createWebHashHistory() // URL включает # (hash mode)
createMemoryHistory() // Используется для тестирования или серверного рендеринга

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

Можно задать параметры в URL:

{
path: '/user/:id',
name: 'User',
component: UserProfile
}

И использовать их внутри компонента:

setup(props) {
const route = useRoute();
const userId = route.params.id;
}

Если компонент использует props: true, параметры можно передать как свойства:

{
path: '/user/:id',
component: UserProfile,
props: true
}

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

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

{
path: '/dashboard',
component: DashboardLayout,
children: \[
{
path: 'settings',
component: Settings
},
{
path: 'profile',
component: Profile
}
\]
}

И внутри DashboardLayout.vue:

&lt;router-view /&gt;

Lazy Loading компонентов

Для загрузки компонентов по требованию:

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

Webpack (или Vite) автоматически создаёт отдельные чанки, что снижает первоначальный размер бандла.

Навигационные защиты (Navigation Guards)

Глобальные Guards

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

Guards на уровне маршрута

{
path: '/admin',
component: AdminPage,
beforeEnter: (to, from, next) => {
if (store.user.isAdmin) next();
else next('/unauthorized');
}
}

Guards внутри компонентов

beforeRouteEnter(to, from, next) {
next(vm => {
// доступ к экземпляру vm
});
}
beforeRouteUpdate(to, from, next) {
// вызывается при смене параметров маршрута
next();
}
beforeRouteLeave(to, from, next) {
// можно прервать уход со страницы
next();
}

Навигация по имени

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

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

Обработка несуществующих маршрутов (404)

{
path: '/:pathMatch(.\*)\*',
name: 'NotFound',
component: NotFoundPage
}

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

Props для маршрутов

Vue Router может передавать параметры маршрута в качестве props, что делает компонент более предсказуемым и тестируемым.

{
path: '/user/:id',
component: UserPage,
props: route => ({ id: Number(route.params.id) })
}

Импорт маршрутов из отдельных файлов

В больших проектах маршруты разбивают на модули:

// routes/user.js
export default \[
{
path: '/users',
component: UsersList
},
{
path: '/users/:id',
component: UserProfile
}
\];
// router.js
import userRoutes from './routes/user';
const routes = \[
...userRoutes,
{ path: '/', component: HomePage }
\];

Интеграция с Composition API

Vue Router 4 поддерживает Composition API через хуки:

import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
router.push({ name: 'Home' });
console.log(route.params.id);

useRouter() даёт доступ к маршрутизатору, а useRoute() — к текущему маршруту. Это удобно в <script setup> или setup().

Meta-поля маршрута

Можно задавать метаинформацию для маршрута, например, требования авторизации:

{
path: '/admin',
component: AdminPanel,
meta: {
requiresAuth: true,
title: 'Админ-панель'
}
}

И использовать их в guards или других частях приложения.

26-07-2025
Medium 21 просмотров