Beispiele für dynamische Vue-Routing-Umleitung und Navigationsschutz

Jetzt werde ich Ihnen ein Beispiel für die dynamische Routenumleitung und den Navigationsschutz von Vue vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Laut der offiziellen Vue-Dokumentation gibt es detaillierte Beispiele für die Umleitung, es gibt jedoch nicht viele Beschreibungen zur Verwendung der dynamischen Umleitung. Die Beschreibung des Umleitungsteils lautet wie folgt:

Umleiten

Die Umleitung erfolgt auch über die Routenkonfiguration. Das folgende Beispiel leitet von /a nach /b weiter:

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

Das umgeleitete Ziel kann auch sein Eine benannte Route:

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

oder sogar eine Methode, die das Umleitungsziel dynamisch zurückgibt:

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: to => {
  // 方法接收 目标路由 作为参数
  // return 重定向的 字符串路径/路径对象
 }}
 ]
})`这里写代码片`

Ein Beispiel für eine dynamische Umleitung ist wie folgt:

 { path: '/dynamic-redirect/:id?',
  redirect: to => {
  const { hash, params, query } = to
  if (query.to === 'foo') {
   return { path: '/foo', query: null }
  }
  if (hash === '#baz') {
   return { name: 'baz', hash: '' }
  }
  if (params.id) {
   return '/with-params/:id'
  } else {
   return '/bar'
  }
  }
 }

Erste Parameterdekonstruktion, get Hash, Parameter, Abfrage, dann eine logische Beurteilung basierend auf dem erhaltenen Wert und dann eine dynamische Umleitung. Der Rückgabewert ist hier der Pfadwert, nicht der Parameterwert. Es muss ein vorhandener Pfad sein, um eine Routenumleitung zu ermöglichen. Und dieser Pfad kann nicht er selbst sein, denn wenn er als Umleitungsroute zu sich selbst springt und die Umleitung fortsetzt, entsteht eine Endlosschleife.

Die aktuellen Anforderungen lauten wie folgt:

Um zu verhindern, dass Benutzer versehentlich Routing-Parameter ändern und einen Absturz der Seite verursachen, ist eine Routing-Umleitung erforderlich, um Parameter umzuleiten erfüllen nicht die Anforderungen an eine kanonische Seite. Beispielsweise klickt der Benutzer auf die Schaltfläche, um zu /list/1 zu springen, aber der Benutzer ändert 1 und übergibt nicht standardmäßige Parameter an die Seite. Es wird gehofft, dass der Benutzer nach dem Ändern des Parameterwerts < zur Standard-Standardseite springen kann 🎜>

Die Wirkung des obigen Codes besteht darin, die Routing-Parameter abzurufen. Wenn der Benutzer die Seitenparameter ändert, die nicht den Spezifikationen entsprechen, wird die Route umgeleitet. Damit die Seite die richtigen Parameterwerte erhalten kann. Der aktuelle Effekt ist, dass, wenn der Benutzer /1 eingibt, die normale Seite /list/1 aufgerufen wird. Wenn der Benutzer /xsajsxoal, /5, /-5 und andere nicht standardmäßige Parameter eingibt, wird zu /list/ gesprungen. 0.

Obwohl es kein Problem mit der Umleitungslogik gibt, besteht das Problem immer noch. Was sollte der Benutzer tun, wenn er /list/1 weiterhin in /list/xsjknxkja ändert?

Die sichtbare Umleitung ist zur Lösung dieses Problems nicht geeignet. Zu diesem Zeitpunkt wird der Navigationsschutz des Vue-Routings verwendet. Die Implementierung von Navigation Guard ist wie folgt:

 {
  path: '/:type',
  name: 'normal',
  component: index,
  beforeEnter (to, from, next) {
  if (/^[0-3]$/.test(to.params.type)) {
   next()
  } else {
   next('/0')
  }
  }
 }

Das offizielle Dokument über Navigation Guard wird wie folgt beschrieben:

Wie der Name schon sagt, Die von Vue-Router bereitgestellten Navigationswächter werden hauptsächlich zum Schutz der Navigation durch Springen oder Abbrechen verwendet. Es gibt mehrere Möglichkeiten, den Routennavigationsprozess zu integrieren: global, exklusiv für eine einzelne Route oder auf Komponentenebene.

Denken Sie daran, dass Änderungen an Parametern oder Abfragen keine Ein-/Ausstiegs-Navigationsschutze auslösen. Sie können auf diese Änderungen reagieren, indem Sie das $route-Objekt beobachten oder den komponenteninternen Schutz beforeRouteUpdate verwenden.

Sie können router.beforeEach verwenden, um einen globalen beforeEach-Guard zu registrieren:

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

Wenn eine Navigation ausgelöst wird, wird der globale beforeEach-Guard in der Reihenfolge seiner Erstellung aufgerufen. Guards werden asynchron analysiert und ausgeführt. Zu diesem Zeitpunkt wartet die Navigation, bis alle Guards aufgelöst sind.

Jede Schutzmethode erhält drei Parameter:

zu: Route: Das einzugebende Zielroutenobjekt

von: Route: Die Route, die die aktuelle Navigation verlässt

nächster: Funktion: Stellen Sie sicher, dass Sie diese Methode aufrufen, um diesen Haken aufzulösen. Der Ausführungseffekt hängt von den Aufrufparametern der nächsten Methode ab.

next(): Fahren Sie mit dem nächsten Hook in der Pipeline fort. Wenn alle Hooks ausgeführt werden, wird der Navigationsstatus bestätigt.

next(false): Aktuelle Navigation unterbrechen. Wenn sich die URL des Browsers ändert (vielleicht manuell durch den Benutzer oder über die Zurück-Schaltfläche des Browsers), wird die URL-Adresse auf die Adresse zurückgesetzt, die der Von-Route entspricht.

next(‘/’) oder next({ path: ‘/’ }): Springe zu einer anderen Adresse. Die aktuelle Navigation wird unterbrochen und eine neue Navigation gestartet.

next(error): (2.4.0+) Wenn der an next übergebene Parameter eine Fehlerinstanz ist, wird die Navigation beendet und der Fehler an router.onError( übergeben ) registrierter Rückruf.

Stellen Sie sicher, dass Sie die nächste Methode aufrufen, sonst wird der Hook nicht aufgelöst.

Entsprechend den Anforderungen müssen Sie den globalen Schutz nicht verwenden. Sie müssen nur den Routen-Exklusivschutz verwenden. Daher müssen Sie nur beforeEnter in die Route einfügen und dann feststellen, ob er den Parameter erfüllt Wenn ja, verwenden Sie next(), um den nächsten Hook einzugeben, andernfalls verwenden Sie next('/'), um zur Zieladresse zu springen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung der Vue.js-Implementierung des konfigurierbaren Anmeldeformularcodes

So führen Sie Symbolsymbole in Vue-Projekten ein

Überprüfung des E-Mail-Adressformats in JavaScript

Das obige ist der detaillierte Inhalt vonBeispiele für dynamische Vue-Routing-Umleitung und Navigationsschutz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!