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

Клиентская и серверная маршрутизация ​

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

Однако в Одностраничном приложении (SPA) клиентский JavaScript может перехватывать навигацию, динамически получать новые данные, и обновлять текущую страницу без полной перезагрузки страницы. Обычно это приводит к более быстрому взаимодействию с пользователем, особенно для случаев использования, которые больше похожи на настоящие «приложения», где ожидается, что пользователь будет выполнять множество взаимодействий в течение длительного периода времени.

В таких SPA «маршрутизация» осуществляется на стороне клиента, в браузере. Маршрутизатор на стороне клиента отвечает за управление отображаемым представлением приложения с помощью API-интерфейсов браузера, таких как History API или событие hashchange.

Официальный маршрутизатор ​

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

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

Если вам нужна только очень простая маршрутизация и вы не хотите использовать полнофункциональную библиотеку маршрутизаторов, вы можете обойтись Динамическими компонентами и обновлять текущее состояние компонента, прослушивая события браузера hashchange или используя History 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>