Vue Router, як офіційний інструмент маршрутизації для Vue.js, надає можливість створювати односторінкові веб-застосунки (SPA). Він дозволяє встановлювати відповідності між компонентами вашого сайту та різними URL-адресами, керувати історією навігації, а також налаштовувати розширені опції маршрутизації.
Початок роботи з Vue Router
Для початку роботи з Vue Router, скористайтеся командою npm (менеджер пакетів Node) у вашій робочій директорії для створення нового Vue-проєкту:
npm create vue
Під час налаштування проєкту, коли з’явиться запит про додавання Vue Router для створення SPA, підтвердіть свій вибір.
Після цього відкрийте проєкт у вашому редакторі коду. У каталозі src повинен з’явитися каталог router.
Всередині каталогу router знаходиться файл index.js, який містить JavaScript код, що обробляє маршрути у вашому додатку. Файл index.js імпортує дві функції з бібліотеки vue-router: createRouter та createWebHistory.
Функція createRouter створює нову конфігурацію маршрутів на основі переданого об’єкта. Цей об’єкт має містити інформацію про історію навігації та масив об’єктів з деталями про кожен маршрут. Масив routes є ключовим елементом, який визначає структуру маршрутизації.
Після конфігурування маршрутів, потрібно експортувати створений екземпляр роутера та імпортувати його у файл 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 імпортується функція роутера, а потім використовується метод use для підключення її до програми Vue.
Далі, ви можете впровадити ваші маршрути в застосунок 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”.
Компонент RouterView відображає компонент, асоційований з поточним маршрутом. Він слугує контейнером для відображення контенту поточного маршруту. При переході на інший маршрут, компонент, що відповідає цьому маршруту, буде відтворено всередині RouterView.
Додавання параметрів до маршрутів вашої програми
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"),
},
],
});
У цьому прикладі показано налаштування роутера з двома маршрутами: home та developer. Маршрут developer показує інформацію про розробника на основі його номера профілю.
Тепер модифікуйте файл 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>
У цьому прикладі створюється змінна developer, як реактивний об’єкт з двома властивостями: ім’я та профіль. Потім другий 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, відобразиться повідомлення “This is developer 123 about page”.
Також можна отримати доступ до інформації про маршрут у блоці 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. Ця функція призначається змінній, яка потім використовується в шаблоні.
Використання useRoute() відповідає підходу Composition API у Vue 3, що дозволяє використовувати реактивну систему. Це гарантує автоматичне оновлення компонента при зміні параметрів маршруту.
Додавання запитів до маршрутів вашої програми
Запити або рядки запитів є необов’язковими параметрами, що додаються до URL після знаку питання “?”. Наприклад, у маршруті “/search?name=vue”, “name=vue” є рядком запиту, де name є ключем, а vue є значенням.
Для додавання запиту до маршруту у Vue Router можна використовувати властивість query об’єкта to в компоненті RouterLink. Властивість query має бути об’єктом, де кожна пара ключ-значення представляє параметр запиту. Ось приклад:
<RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Home</RouterLink>
Після додавання запиту до маршруту, можна отримати доступ до параметрів запиту у компонентах Vue. Це можна зробити за допомогою об’єкта $route або функції useRoute, подібно до додавання параметрів маршруту.
Ось приклад використання параметра запиту в компоненті:
<template>
{{ $route.query.name }}
</template>
Цей код демонструє, як отримати доступ до значення параметра запиту (name) з URL через $route.query.
Визначення резервної сторінки (404)
Vue Router дозволяє визначати резервний маршрут, який спрацює, якщо жоден з інших маршрутів не відповідає URL-адресі. Це корисно для відображення сторінки “404 Not Found”.
Ось як можна визначити резервний маршрут з Vue Router:
{
path:'/:pathName(.*)',
name: 'NotFound',
component: () => import('../views/NotFoundView.vue')
}
Частина /:pathName позначає динамічний сегмент URL, а (.*) є регулярним виразом, який відповідає будь-яким символам після динамічного сегмента. Це дозволяє маршруту відповідати будь-якому шляху.
Коли користувач переходить за URL, який не відповідає жодному іншому маршруту, Vue відобразить компонент NotFoundView. Цей підхід використовується для обробки помилок 404 або для показу резервної сторінки, коли запитуваний маршрут не знайдено.
Навчіться створювати анімацію у Vue
Ви дізналися, як додавати параметри та запити до маршрутів вашої програми, а також як визначити резервну сторінку для обробки помилок 404. Vue Router пропонує набагато більше можливостей, таких як налаштування динамічних та вкладених маршрутів.
Додавання анімації та переходів між елементами веб-сторінки значно покращує досвід користувача. Вам слід навчитися створювати переходи та анімацію у Vue для створення більш привабливих і зручних веб-сайтів.