Routing ​

Routing po stronie klienta vs. po stronie serwera ​

Routing po stronie serwera oznacza, że serwer zwraca response opierając się na URL pod którym użytkownik odwiedza aplikację. Gdy klikamy w link w tradycyjnej aplikacji renderowanej po stronie serwera, przeglądarka pobiera odpowiedź HTML z serwera i przeładowuje całą stronę z nowym kodem HTML.

W aplikacjach Single-Page (SPA), kod JavaScript po stronie klienta może przechwycić nawigację, dynamicznie pobrać nowe dane i zaktualizować stronę bez pełnego odświeżania strony. Zazwyczaj oznacza to lepsze user experience, szczególnie w przypadkach, które są bardziej jak faktyczne "aplikacje" - tj użytkownik wykonuje bardzo wiele interakcji przez dłuższy czas.

W takich aplikacjach SPA "routing" dzieje się po stronie klienta, w jego przeglądarce. Router w tym wypadku jest odpowiedzialny za zarządzanie renderowanym widokiem aplikacji wykorzystując API przeglądarek jak History API lub event hashchange.

Oficjalny Router ​

Vue świetnie nadaje się do budowania aplikacji SPA. Dla większości SPA, zalecamy użycie oficjalnie wspieranej biblioteki Vue Router. Aby dowiedzieć się więcej, odwiedź dokumentację Vue Routera.

Prosty routing od podstaw ​

Jeśli potrzebujesz jedynie bardzo prostego routingu i nie chcesz korzystać z pełnoprawnej biblioteki routingu, możesz wykorzystać dynamiczne komponenty i aktualizować obecny komponent nasłuchując do eventów hashchange przegląrdki lub wykorzystać History API.

Poniżej przedstawiamy bardzo uproszczony przykład:

<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="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</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="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>