Vue Router, офіційний маршрутизатор для Vue, дає змогу створювати односторінкові програми (SPA) у Vue. Vue Router дозволяє зіставляти компоненти вашої веб-програми з різними маршрутами браузера, керувати стеком історії вашої програми та налаштовувати розширені параметри маршрутизації.
Початок роботи з Vue Router
Щоб почати роботу з Vue Router, запустіть таку команду npm (Node Package Manager) у бажаному каталозі, щоб створити програму Vue:
npm create vue
Коли буде запропоновано додати Vue Router для розробки односторінкових програм, виберіть Так.
Далі відкрийте свій проект у текстовому редакторі, якому ви віддаєте перевагу. Каталог src вашої програми має містити папку маршрутизатора.
Папка маршрутизатора містить файл index.js, що містить код JavaScript для обробки маршрутів у вашій програмі. Файл index.js імпортує дві функції з пакета vue-router: createRouter і createWebHistory.
Функція createRouter створює нову конфігурацію маршруту з об’єкта. Цей об’єкт містить історію та ключі маршрутів та їхні значення. Ключ маршрутів — це масив об’єктів, що детально описують конфігурацію кожного маршруту, як показано на зображенні вище.
Після налаштування маршрутів вам потрібно експортувати цей екземпляр маршрутизатора та імпортувати цей екземпляр у файл main.js:
import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(router)
app.mount('#app')
Ви імпортували функцію маршрутизатора у файл main.js, а потім змусили програму Vue використовувати цю функцію маршрутизатора за допомогою методу use.
Потім ви можете застосувати свої маршрути до програми Vue, структурувавши блок коду, схожий на наведений нижче:
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</header><RouterView />
</template>
Наведений вище блок коду демонструє використання Vue Router у компоненті Vue. Фрагмент коду імпортує два компоненти з бібліотеки vue-router: RouterLink і RouterView.
Компоненти RouterLink створюють посилання на сторінки «Домашня сторінка» та «Про програму» у наведеному вище фрагменті коду. Атрибут to визначає шлях до маршруту, за яким ви переходите, коли клацаєте посилання. Тут у вас є одне посилання, що вказує на кореневий маршрут (“/”), а інше – на маршрут “/about”.
Компонент відображає компонент, пов’язаний із поточним маршрутом. Він діє як заповнювач, де відображатиметься вміст поточного маршруту. Коли ви переходите до іншого маршруту, компонент, пов’язаний із цим маршрутом, відображатиметься всередині компонента.
Додавання параметрів до маршрутів вашої програми
Vue Router дозволяє передавати параметри та запити маршрутам. Параметри – це динамічні частини URL-адреси, позначені двокрапкою «:».
Щоб налаштувати Vue Router на зйомку параметрів у маршрутах програми, налаштуйте конкретний маршрут у файлі index.js:
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "https://www.makeuseof.com/",
name: "home",
component: HomeView,
},
{
path: "/developer/:profileNumber",
name: "developer",
component: () => import("../views/devView.vue"),
},
],
});
Наведений вище блок коду показує екземпляр маршрутизатора з двома маршрутами: домашнім і розробником. Маршрут розробника показує інформацію про конкретного розробника на основі номера профілю розробника.
Тепер змініть свій файл App.vue так, щоб він виглядав як наведений нижче фрагмент коду:
<script setup>
import { ref } from "vue";
import { RouterLink, RouterView } from "vue-router";const developer = ref([
{
name: "Chinedu",
profile: 2110,
},
]);
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Home</RouterLink>
<RouterLink :to="{ path: `/developer/${developer.profile}` }">
Dev Profile
</RouterLink>
</nav>
</header><RouterView />
</template>
Наведений вище блок коду встановлює змінну розробника як реактивний об’єкт із двома властивостями: ім’я та профіль. Потім другий компонент RouterLink направляє до компонента devView. Тепер ви можете отримати доступ до значення параметра, який ви передаєте в URL-адресу в блоці шаблону або блоці JavaScript компонента devView.
Щоб отримати доступ до цього значення в блоці шаблону компонента devView, Vue надає метод $route, об’єкт, що містить властивості, які детально описують інформацію URL-адреси. Ця інформація включає повний шлях, запити, параметри та компоненти.
Ось приклад того, як отримати доступ до профілю конкретного розробника в компоненті devView за допомогою методу $route:
<template>
<div>
<h1>This is developer {{ $route.params.profileNumber }} about page</h1>
</div>
</template>
Наведений вище фрагмент коду демонструє, як використовувати метод $route для доступу та відображення значення параметра profileNumber у шаблоні компонента.
Властивість params у методі $route містить параметри, які ви визначаєте в маршруті. Коли Vue відтворює цей компонент, він замінює значення $route.params.profileNumber фактичним значенням, яке ви передаєте в URL-адресі.
Наприклад, якщо ви відвідаєте /developer/123, відобразиться повідомлення «Це сторінка про розробника 123».
Ви також можете отримати доступ до інформації про маршрут у блоці JavaScript вашого компонента. Наприклад:
<script setup>
import { useRoute } from "vue-router";const route = useRoute();
</script><template>
<div>
<h1>This is developer {{ route.params.profileNumber }} about page</h1>
</div>
</template>
У попередньому блоці коду ви отримували доступ до об’єкта $route безпосередньо в шаблоні, щоб отримати параметри маршруту. Проте в оновленому блоці коду ви імпортували функцію useRoute() із пакета vue-router. Ви призначили функцію змінній, яку потім використали в шаблоні свого компонента Vue.
За допомогою useRoute() ви дотримуєтеся підходу API композиції Vue 3, використовуючи систему реактивності. Це гарантує автоматичне оновлення компонента при зміні параметрів маршруту.
Додавання запитів до маршрутів вашої програми
Запити або рядки запитів – це необов’язкові параметри, які додаються до URL-адреси після знака питання «?». Наприклад, у маршруті «/search?name=vue» «name=vue» — це рядок запиту, де name — ключ, а vue — значення.
Щоб додати запит до маршруту у Vue Router, ви можете скористатися властивістю запиту об’єкта to в компоненті RouterLink. Властивість запиту має бути об’єктом, де кожна пара ключ-значення представляє параметр запиту. Ось приклад:
<RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Home</RouterLink>
Після додавання запиту до маршруту ви можете отримати доступ до параметрів запиту у своїх компонентах Vue. Ви можете зробити це за допомогою об’єкта $route або функції useRoute, подібно до додавання параметрів маршруту.
Ось приклад використання параметра запиту в компоненті:
<template>
{{ $route.query.name }}
</template>
Цей фрагмент коду демонструє, як отримати доступ і відобразити значення параметра запиту (ім’я) з URL-адреси за допомогою об’єкта $route.query у шаблоні компонента Vue.js.
Визначення резервної сторінки (404).
Vue Router дозволяє визначити резервний маршрут, який буде відповідати, якщо інші маршрути не збігаються з URL-адресою. Це корисно для відображення сторінки «404 не знайдено».
Ось як ви можете визначити резервний маршрут за допомогою Vue Router:
{
path:'/:pathName(.*)',
name: 'NotFound',
component: () => import('../views/NotFoundView.vue')
}
Частина /:pathName вказує на динамічний сегмент в URL-адресі, а (.*) — це регулярний вираз JavaScript, який відповідає будь-яким символам після динамічного сегмента. Це дозволяє маршруту відповідати будь-якому шляху.
Коли користувач переходить за URL-адресою, яка не відповідає іншим маршрутам, Vue відтворить компонент NotFoundView. Ви використовуєте цей підхід для обробки помилок 404 або відображення резервної сторінки, коли запитаний маршрут не знайдено.
Навчіться створювати анімацію у Vue
Ви дізналися, як додавати параметри та запити до маршрутів вашої програми. Ви також дізналися, як визначити резервну сторінку для обробки помилок 404. Vue Router надає набагато більше функціональних можливостей, наприклад налаштування динамічних і вкладених маршрутів.
Додавання анімації та переходів між елементами на веб-сторінці може значно покращити взаємодію з користувачем. Вам потрібно навчитися створювати переходи та анімацію у Vue, щоб створити плавніший, привабливіший і загалом кращий веб-сайт.