Směrování ​

Směrování na straně klienta vs. na straně serveru ​

Směrování (routing) na straně serveru znamená, že server odesílá odpověď na základě URL cesty, kterou chce uživatel navštívit. Když klikneme na odkaz v tradiční webové aplikaci s vykreslováním na straně serveru (SSR), prohlížeč obdrží od serveru HTML odpověď a znovu načte celou stránku s novým HTML obsahem.

V Single-page aplikaci (SPA) však může klientský JavaScript zachytit navigaci, dynamicky načíst nová data a aktualizovat zobrazenou stránku bez plného reloadu. To obvykle vede k rychlejší odezvě a lepšímu uživatelskému zážitku, zejména v případech, které připomínají skutečné „aplikace“, kde se od uživatele očekává provádění mnoha interakcí po delší dobu.

V takových SPA je „směrování“ prováděno na straně klienta, v prohlížeči. Router na klientovi je zodpovědný za správu vykresleného obsahu aplikace pomocí API prohlížeče, jako je History API nebo událost hashchange.

Oficiální router ​

Vue je na vytváření SPA dobře připraveno. Pro většinu SPA se doporučuje použít oficiálně podporovanou knihovnu Vue Router. Další podrobnosti naleznete v dokumentaci Vue Routeru.

Jednoduché směrování od základů ​

Pokud potřebujete pouze velmi jednoduché směrování a nechcete používat plnohodnotnou knihovnu, můžete to udělat pomocí dynamických komponent a aktualizovat aktuální stav komponenty posloucháním událostí hashchange v prohlížeči nebo pomocí History API.

Zde je příklad základní struktury:

<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="#/">Domů</a> |
  <a href="#/about">O nás</a> |
  <a href="#/non-existent-path">Chybný odkaz</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="#/">Domů</a> |
  <a href="#/about">O nás</a> |
  <a href="#/non-existent-path">Chybný odkaz</a>
  <component :is="currentView" />
</template>