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.

Official Router ​

Vue is well-suited for building SPAs. For most SPAs, it's recommended to use the officially-supported Vue Router library. For more details, see Vue Router's documentation.

Simple Routing from Scratch ​

If you only need very simple routing and do not wish to involve a full-featured router library, you can do so with Dynamic Components and update the current component state by listening to browser hashchange events or using the History API.

Here's a bare-bone example:

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