So verwenden Sie 7 Arten von Routing-Guards in vue3

Welche Arten von Routing-Guards gibt es?

Routenwächter (Navigationswächter) werden in drei Typen unterteilt: Globalwächter (3), Routenexklusivwächter (1), Komponentenwächter (3)

Drei Parameter von Routenwächtern

zu: zum Springen Die zu gehende Zielroute zu

von: Von welcher Route soll gesprungen werden

nächster: Ohne Blockierung direkt passieren

Hinweis: Es muss sichergestellt werden, dass die nächste Funktion einmal in einem bestimmten Navigationswächter aufgerufen wurde. Es kann mehrfach vorkommen, jedoch nur, wenn sich nicht alle logischen Pfade überschneiden, andernfalls wird ein Fehler gemeldet.

Fall:

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

1. Globaler Routing-Guard

Es gibt drei globale Routing-Guards: Globaler Front-Guard, globaler Post-Guard, globaler Parsing-Guard

Globaler Front-Guard

1. Verwendung: main Dieser Hook wird hauptsächlich zur Anmeldeüberprüfung verwendet, dh er wird vor dem Routensprung benachrichtigt, um ihn nach dem Sprung nicht zu spät zu benachrichtigen. Code:

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

3. Beispiel: Login-Beurteilung vornehmen

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您还没有登录，请先登录');
    next('/login');
  }
})

Globaler Postschutz

1. Im Gegensatz zu beforeEach wird es nach Abschluss von beforeEach und beforeRouteEnter ausgelöst (In-Komponenten-Schutz). Der Hook akzeptiert die nächste Funktion nicht und ändert die Navigation selbst nicht Der Unterschied besteht darin, dass vor der Navigationsbestätigung gleichzeitig die Guard- und asynchronen Routing-Komponenten in allen Komponenten aufgelöst werden, d. h. nach beforeEach und beforeRouteEnter in der Komponente, bevor afterEach aufgerufen wird.

2. Code:

router.afterEach((to,from)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})

1. Guards in der Komponente

Es gibt drei Guards in der Komponente: beforeRouteEnter, bevor die Route eintritt, beforeRouteLeave, wenn die Route verlässt, und beforeRouteUpdate, wenn die Seite aktualisiert wird

beforeRouteEnter(to, from, next)

1 Verwendung: Wird in Komponentenvorlagen verwendet und auf derselben Ebene wie die Methoden geschrieben: {}. Komponenten-Routing-Guards sind Routing-Guards, die in jeder separaten Vue-Datei geschrieben sind

2.

• router.beforeResolve((to,from,next)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})

  beforeRouteUpdate(to, from, next)

1. Verwendungsmethode: Wird in Komponentenvorlagen verwendet und auf derselben Ebene wie Methoden geschrieben: {}. Komponentenroutenwächter sind Routenwächter, die in jede separate Vue-Datei geschrieben werden

2. Code:

beforeRouteEnter(to, from, next) {
    // 在组件生命周期beforeCreate阶段触发
    console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
    next((vm) => {
      console.log('组件内路由前置守卫 vm', vm) // vm 就是this
    })
  },

beforeRouteLeave(to, from, next)

1. Verwendung: Wird in Komponentenvorlagen verwendet und auf derselben Ebene wie Methoden geschrieben: {}. Komponentenroutenwächter werden in jede einzelne Route geschrieben Guard in der Vue-Datei

2. Code:

• beforeRouteUpdate (to, from, next) {
      // 同一页面，刷新不同数据时调用，
      // 可以访问组件实例 
  }

  Route Exclusive Guard

Es gibt nur einen Route Exclusive Guard: beforeEnter wird beim Betreten der Route ausgelöst

Route Exclusive Guard beforeEnter(to, from, next )

1. Verwendung:

Der Route Exclusive Guard wird separat für die Route auf der Routing-Konfigurationsseite konfiguriert.

• 2. Code:

  beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例
  }

  : Navigationsanalyseprozess 1. Rufen Sie den Komponentenschutz auf, um die Route vor RouteLeave zu verlassen. 4. Rufen Sie beforeRouteUpdate in der wiederverwendeten Komponente auf. 5

  6 .Lösen Sie die asynchrone Routing-Komponente auf

  7. Rufen Sie den globalen Parsing-Guard beforeResolve auf
10. Rufen Sie den globalen Post-Hook auf DOM-Update gemountet

12. Führen Sie die Callback-Funktion aus, die im beforeRouteEnter-Guard an next übergeben wurde

Das obige ist der detaillierte Inhalt vonSo verwenden Sie 7 Arten von Routing-Guards in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!