Маршрутизація
Клієнтська маршрутизація у порівнянні з серверною маршрутизацією
Маршрутизація на сервері реалізована таким чином, що сервер надсилає відповідь, залежно від URL, який відвідує користувач. Коли ми переходимо за посиланням, у традидійному додатку з рендерингом на стороні серверу, браузер отримує HTML у відповідь та перезавантажує всю сторінку з новим HTML.
Проте в одно-сторінковому додатку (SPA), JavaScript може перехоплювати навігацію, динамічно отримувати дані та оновлювати поточну сторінку без повного перезавантаження. Зазвичай це покращує взаємодію з користувачем, особливо для випадків використання, які більше схожі на традиційні "додатки", де користувач виконує багато взаємодій протягом тривалого часу.
У таких одно-сторінкових додатках, "маршрутизація" відбувається на стороні клієнта, в браузері. Маршрутизатор на стороні клієнта відповідає за керування відрендереним виглядом програми за допомогою API браузера, наприклад API історії або події hashchange
.
Офіційний маршрутизатор
Vue добре підходить для розробки одно-сторінкових додатків. Для більшості SPA рекомендується використовувати офіційно підтримувану бібліотеку Vue Router. Для додаткової інформації перегляньте документацію Vue Router.
Проста маршрутизація з нуля
Якщо вам потрібна дуже проста маршрутизація і ви не хочете використовувати повноцінну бібліотеку, ви можете це зробити за допомогою динамічних компонентів і оновлювати поточний стан компонента прослуховуючи подію hashchange
або використовуючи API історії.
Ось простий приклад:
vue
<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'
const routes = {
'/': Home,
'/about': About
}
const currentPath = ref(window.location.hash)
window.addEventListener('hashchange', () => {
currentPath.value = window.location.hash
})
const currentView = computed(() => {
return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>
<template>
<a href="#/">Головна</a> |
<a href="#/about">Про нас</a> |
<a href="#/non-existent-path">Несправне посилання</a>
<component :is="currentView" />
</template>