Маршрутизація ​

Клієнтська маршрутизація у порівнянні з серверною маршрутизацією ​

Маршрутизація на сервері реалізована таким чином, що сервер надсилає відповідь, залежно від URL, який відвідує користувач. Коли ми переходимо за посиланням, у традидійному додатку з рендерингом на стороні серверу, браузер отримує HTML у відповідь та перезавантажує всю сторінку з новим HTML.

Проте в одно-сторінковому додатку (SPA), JavaScript може перехоплювати навігацію, динамічно отримувати дані та оновлювати поточну сторінку без повного перезавантаження. Зазвичай це покращує взаємодію з користувачем, особливо для випадків використання, які більше схожі на традиційні "додатки", де користувач виконує багато взаємодій протягом тривалого часу.

У таких одно-сторінкових додатках, "маршрутизація" відбувається на стороні клієнта, в браузері. Маршрутизатор на стороні клієнта відповідає за керування відрендереним виглядом програми за допомогою API браузера, наприклад API історії або події hashchange.

Офіційний маршрутизатор ​

Vue добре підходить для розробки одно-сторінкових додатків. Для більшості SPA рекомендується використовувати офіційно підтримувану бібліотеку Vue Router. Для додаткової інформації перегляньте документацію Vue Router.

Проста маршрутизація з нуля ​

Якщо вам потрібна дуже проста маршрутизація і ви не хочете використовувати повноцінну бібліотеку, ви можете це зробити за допомогою динамічних компонентів і оновлювати поточний стан компонента прослуховуючи подію hashchange або використовуючи API історії.

Ось простий приклад:

<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>

<script>
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

export default {
  data() {
    return {
      currentPath: window.location.hash
    }
  },
  computed: {
    currentView() {
      return routes[this.currentPath.slice(1) || '/'] || NotFound
    }
  },
  mounted() {
    window.addEventListener('hashchange', () => {
		  this.currentPath = window.location.hash
		})
  }
}
</script>

<template>
  <a href="#/">Головна</a> |
  <a href="#/about">Про нас</a> |
  <a href="#/non-existent-path">Несправне посилання</a>
  <component :is="currentView" />
</template>