redirect-and-alias.md

Redirect und Alias

Redirect (Umleitung)

Ein Redirect bedeutet, dass, wenn der Nutzer /a besucht, die URL mit /b ersetzt wird und auch die Komponente der Route zu /b rendert. Das richtet man in der routes-Konfiguration folgendermaßen ein:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

Der Redirect kann auch auf eine benannten Route angewandt werden:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

Oder auch mit einer Funktion für dynamische Redirects:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // Die Funktion erhält die Ziel-Route als Argument
      // und gibt den Umleitungsort/-pfad hier aus.
    }}
  ]
})

Für erweiterte Anwendungsmöglichkeiten siehe auch dieses Beispiel.

Alias

Ein Redirect bedeutet: Wenn wir die URL /a besuchen, wird die URL mit /b ersetzt und dann mit der Route für /b gematched. Aber was ist dann ein Alias?

Ein Alias von /a als /b bedeutet, dass die URL /b bleibt, wenn diese besucht wird, jedoch die Komponente von /a gerendert wird.

Dieses kann man in der Router-Konfiguration folgendermaßen definieren:

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

Ein Alias gibt die Möglichkeit eine bestimmte UI-Struktur einer beliebigen URL zuzuordnen, anstatt von der verschachtelten Struktur der Konfiguration eingeschränkt zu werden.

Für die erweiterte Anwendung siehe folgendes Beispiel.