Routing ​

Clientseitiges vs. serverseitiges Routing ​

Routing auf der Serverseite bedeutet, dass der Server eine Antwort basierend auf dem URL-Pfad sendet, den der Benutzer besucht. Wenn wir in einer herkömmlichen, vom Server gerenderten Webanwendung auf einen Link klicken, erhält der Browser eine HTML-Antwort vom Server und lädt die gesamte Seite mit dem neuen HTML neu.

In einer Single-Page-Anwendung (SPA) kann das clientseitige JavaScript jedoch die Navigation abfangen, dynamisch neue Daten abrufen und die aktuelle Seite aktualisieren, ohne dass die gesamte Seite neu geladen werden muss. Dies führt in der Regel zu einer flüssigeren Benutzererfahrung, insbesondere bei Anwendungsfällen, die eher tatsächlichen „Anwendungen” ähneln, bei denen vom Benutzer über einen längeren Zeitraum hinweg viele Interaktionen erwartet werden.

In solchen SPAs erfolgt das „Routing“ auf der Client-Seite, im Browser. Ein clientseitiger Router ist für die Verwaltung der gerenderten Ansicht der Anwendung mithilfe von Browser-APIs wie der History API oder dem hashchange-Ereignis verantwortlich.

Offizieller Router ​

Vue eignet sich gut für die Erstellung von SPAs. Für die meisten SPAs wird empfohlen, die offiziell unterstützte Vue Router-Bibliothek zu verwenden. Weitere Informationen finden Sie in der Dokumentation zu Vue Router.

Einfaches Routing von Grund auf ​

Wenn Sie nur sehr einfache Routing-Funktionen benötigen und keine voll ausgestattete Router-Bibliothek verwenden möchten, können Sie dies mit [Dynamic Components](/guide/essentials/component-basics# dynamic-components) und den aktuellen Komponentenstatus aktualisieren, indem Sie auf hashchange-Ereignisse im Browser achten oder die History API verwenden.

Hier ist ein einfaches Beispiel:

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