Skip to content

Роутинг

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

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

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

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

Официальный роутер

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

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

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

Попробовать в песочнице

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

Попробовать в песочнице

РоутингУже загружено