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

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

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

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

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!