Ausführliche Erläuterung von Beispielen für Vue-Routing-Hooks und Anwendungsszenarien

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung von Vue-Routing-Hooks und Anwendungsszenarien vor (Zusammenfassung). Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Routing-Hook-Syntax

Im offiziellen Dokument von vue-router wird Routing-Hook als Navigationsschutz übersetzt. Sie können auch gehen Zur offiziellen Website über das Portal. Details lesen

Routing-Hooks

Routing-Hooks sind hauptsächlich für Benutzer definiert, um beim Routing von Änderungen eine spezielle Verarbeitung durchzuführen, verdammt. . Was für ein Bissen.

Im Allgemeinen bietet Vue drei Haupttypen von Hooks

Globale Hooks
2. Komponenten-Hooks

Alle drei Routing-Hooks beinhalten drei Parameter hier

zu: Route: Das Ziel-Routing-Objekt, das eingegeben werden soll

from: Route: Die Route, die die aktuelle Navigation verlassen wird
next: Funktion: Diese Methode muss aufgerufen werden, um diesen Hook 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.

(1). Globaler Guard (globaler Routing-Hook)

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

const router = new VueRouter({ ... })

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

Jede Guard-Methode akzeptiert Drei Parameter:

1. zu: Route: das Zielroutenobjekt, das gerade betreten wird

2. von: Route: die Route, die die aktuelle Navigation darstellt im Begriff zu gehen

3. weiter: Funktion: Diese Methode muss aufgerufen werden, um diesen Hook aufzulösen. Der Ausführungseffekt hängt von den Aufrufparametern der nächsten Methode ab

Hinweis: Wenn Sie den globalen Routing-Hook verwenden, rufen Sie unbedingt next() auf!!!

( 2). Exklusiv für Routing-Guards (In-Route-Hooks)

Sie können BeforeEnter-Guards direkt in der Routenkonfiguration definieren:

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

Die Methodenparameter dieser Guards sind die gleichen wie die globale Vorwachen.

(3). Guards innerhalb der Komponente (Hook innerhalb der Komponente)

Schließlich können Sie den Routennavigationsschutz direkt in der Routing-Komponente definieren:

1. beforeRouteEnter

2. beforeRouteUpdate (neu in 2.2)

3. beforeRouteLeave

const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不！能！获取组件实例 `this`
  // 因为当守卫执行前，组件实例还没被创建
 },
 beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
 },
 beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
 }
}

zwei. Anwendungsszenarien von Routing-Hooks in der tatsächlichen Entwicklung. In tatsächlichen Projekten habe ich nur beforeRouteLeave verwendet. Die Verwendungsszenarien sind wie folgt: :

(1) Löschen Sie den Timer in der aktuellen Komponente

Wenn in einer Komponente ein Timer vorhanden ist und die Route gewechselt wird, können Sie beforeRouteLeave verwenden, um den Timer zu löschen, um eine Speicherbelegung zu vermeiden:

(2) Wenn die Seite nicht geschlossene Fenster oder nicht gespeicherte Inhalte enthält, verhindern Sie, dass die Seite springt.

beforeRouteLeave (to, from, next) {
 window.clearInterval(this.timer) //清楚定时器
 next()
}

Wenn die Seite wichtige Informationen enthält, die der Benutzer benötigt, kann der Sprung nur durchgeführt werden nach dem Speichern, sonst sollte verhindert werden, dass Benutzer springen

(3) Relevante Inhalte in Vuex oder Session speichern

 beforeRouteLeave (to, from, next) {
 //判断是否弹出框的状态和保存信息与否
 if (this.dialogVisibility === true) {
  this.dialogVisibility = false //关闭弹出框
  next(false) //回到当前页面, 阻止页面跳转
 }else if(this.saveMessage === false) {
  alert('请保存信息后退出!') //弹出警告
  next(false) //回到当前页面, 阻止页面跳转
 }else {
  next() //否则允许跳转
 }
}

, wenn der Benutzer schließen muss Auf dieser Seite können Sie öffentliche Informationen in einer Sitzung oder in Vuex speichern

Verwandte Empfehlungen:

 beforeRouteLeave (to, from, next) {
  localStorage.setItem(name, content); //保存到localStorage中
  next()
}

Detaillierte Erläuterung des Vue-Router-Routings und der Seitennavigation

Implementierungsmethode der Vue-Anmelderoutenüberprüfung

Detaillierte Erläuterung der Routenüberprüfung und der entsprechenden Abhörverwendung in Vue

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für Vue-Routing-Hooks und Anwendungsszenarien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!