Routing ​

Lato client vs. Lato server ​

Il routing lato server implica che il server invii una risposta in base al percorso URL che l'utente sta visitando. Quando clicchiamo su un link in un'app web tradizionalmente renderizzata lato server, il browser riceve una risposta HTML dal server e ricarica l'intera pagina con il nuovo HTML.

In un'applicazione con una singola pagina Single-Page Application (SPA), tuttavia, il JavaScript lato client può intercettare la navigazione, recuperare dinamicamente nuovi dati e aggiornare la pagina corrente senza ricaricare completamente la pagina. Questo solitamente porta a un'esperienza utente più reattiva, specialmente per casi d'uso che sono più simili a vere "applicazioni", in cui ci si aspetta che l'utente esegua molte interazioni nel corso del tempo.

In tali SPA, il "routing" viene gestito lato client, nel browser. Un router lato client è responsabile della gestione della visualizzazione dell'applicazione utilizzando API del browser come History API o l'evento hashchange.

Router ufficiale ​

Vue è ben adatto per la creazione di SPA (Single-Page Application). Per la maggior parte delle SPA, è consigliato utilizzare la libreria ufficiale Vue Router library. Per ulteriori dettagli, consulta la sua documentazione.

Routing semplice da zero ​

Se hai bisogno solo di un routing molto semplice e non desideri utilizzare una libreria di routing completa, puoi farlo con Componenti Dinamici e aggiornare lo stato corrente del componente ascoltando gli eventi hashchange del browser o utilizzando l'History API.

Ecco un esempio di base:

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