Роутинг ​

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

Маршрутизация на стороне сервера означает отправку сервером ответа на основе пути 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>