Praktisches Tutorial zur Verwendung von Vue-Routing-Hooks

Dieses Mal bringe ich Ihnen ein praktisches Tutorial zur Verwendung des Vue-Routing-Hooks. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Vue-Routing-Hooks?

1. Routing-Hook-Syntax

Im offiziellen Dokument von vue-router wird der Routing-Hook in Navigation Guard übersetzt. Nachfolgend finden Sie den Inhalt des Dokuments Zusammenfassung . Sie können den detaillierten Inhalt auch über das Portal lesen

Routing-Hook

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

Im Allgemeinen bietet Vue drei Haupttypen von Hooks

1. Globale Hooks
2. Hooks, die nur für eine bestimmte Route gelten
3. In-Komponenten-Hooks

An den drei Routing-Hooks sind drei Parameter beteiligt. Gehen wir hier direkt zur offiziellen Einführung

zu: Route: Das Zielroutenobjekt, das gerade betreten wird
von: Route: Die Route, die die aktuelle Navigation verlassen wird
nächster: 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 Schutz (globaler Routing-Hook)

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

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

Jede Schutzmethode akzeptiert drei Parameter:

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

2. von: Route: Die Route, die die aktuelle Navigation verlassen wird

3. nächstes: Funktion: Muss aufgerufen werden. Diese Methode löst diesen Hook auf. Der Ausführungseffekt hängt von den Aufrufparametern der nächsten Methode

ab Hinweis: Wenn Sie globale Routing-Hooks verwenden, rufen Sie unbedingt next()!!!

auf (2). Exklusiver Schutz der Route (Haken innerhalb der Route)

Sie können den beforeEnter-Schutz direkt in der Routenkonfiguration definieren:

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

Die Methodenparameter dieser Wächter sind die gleichen wie die der globalen Frontwächter.

(3). Schutzvorrichtungen innerhalb der Komponente (Haken innerhalb der Komponente)

Abschließend 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`
 }
}

2. Anwendungsszenarien von Routing-Hooks in der tatsächlichen Entwicklung

Routing-Hooks werden im eigentlichen Entwicklungsprozess selten verwendet, ich habe beforeRouteLeave nur innerhalb von Komponenten 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:

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

(2) Wenn sich auf der Seite nicht geschlossene Fenster oder nicht gespeicherte Inhalte befinden, verhindern Sie, dass die Seite springt

Wenn die Seite wichtige Informationen enthält, die der Benutzer vor dem Springen speichern muss, oder ein Popup-Fenster vorhanden ist, sollte der Benutzer am Springen gehindert werden

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

(3) Speichern Sie relevante Inhalte in Vuex oder Session

Wenn der Benutzer die Seite schließen muss, können die öffentlichen Informationen in der Sitzung oder in Vuex gespeichert werden.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen erhalten Sie Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie das WeChat-Applet Bilder auf den Server hochlädt

JS implementiert einen transparenten Farbverlauf der Navigationsleiste

Das obige ist der detaillierte Inhalt vonPraktisches Tutorial zur Verwendung von Vue-Routing-Hooks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!