Welche drei Arten von Vue-Routing-Guards gibt es?

In Vue gibt es drei Arten von Routing-Guards: globale Routing-Guards (globale Front-Guards, globale Post-Guards), komponenteninterne Routing-Guards und Route-Exklusiv-Guards (die separat für das Routing auf der Routing-Konfigurationsseite konfiguriert werden). ) bewachen).

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Route Guard kann auch Route Interception verwenden, um festzustellen, ob der Benutzer angemeldet ist und ob er die Berechtigung zum Durchsuchen der Seite hat. Es gibt drei Arten von Routen Wächter in Vue, einer ist der globale Routenwächter, einer ist der Routing-Wächter innerhalb der Komponente und der andere ist der exklusive Wächter für den Router

Der sogenannte Routing-Wächter kann einfach als Sicherheitswächter an der Tür verstanden werden Wenn Sie das Haus betreten möchten, müssen Sie die Sicherheitskontrolle bestehen und dem Wachmann sagen, woher es kommt. Kann man Fremde nicht einfach reinlassen? Wohin gehen? Und dann sagt Ihnen der Wachmann, was als nächstes zu tun ist? Wenn Sie tatsächlich eine Person sind, die vom Eigentümer des Hauses Zutritt erhalten hat, wird Ihnen der Zutritt gestattet. Andernfalls müssen Sie den Eigentümer des Hauses anrufen und mit dem Eigentümer besprechen (Anmelden und Registrieren), um Ihnen die Erlaubnis zu erteilen Erlaubnis.

1. Globaler Schutz

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

2 : Von welcher Route aus abgereist werden soll, next: Funktion, die bestimmt, ob die Routing-Seite angezeigt werden soll, die Sie sehen möchten.

3. Nehmen Sie das folgende Beispiel: Legen Sie den globalen Schutz in main.js fest.

In main.js gibt es einen Route-Instanziierungsobjekt-Router. Das Setzen von Wachen in main.js ist bereits ein globaler Wächter.

• Bestimmen Sie wie folgt, ob der Pfad, den to.path gerade eingibt, eine Anmeldung oder eine Registrierung ist. Wenn ja, führen Sie next() aus, um die aktuelle Schnittstelle anzuzeigen. Wenn nicht, erscheint eine Warnung und Sie gelangen zur Anmeldeoberfläche.
• Dies kann erreicht werden, wenn der Benutzer nicht angemeldet ist, wird die Anmeldeoberfläche immer angezeigt.

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

4. Der globale Post-Hook-Router.afterEach((to,from)=>{})

hat nur zwei Parameter: to: welche Route eingegeben werden soll, from: welche Route verlassen werden soll .

• Wie unten gezeigt, wird jedes Mal, wenn Sie die Route wechseln, eine Warnung angezeigt. Nachdem Sie auf OK geklickt haben, wird die aktuelle Seite angezeigt.

• router.afterEach((to,from)=>{
    alert("after each");
  })

5. Bestimmen Sie, ob store.gettes.isLogin === false angemeldet ist

2. Beim Erreichen dieser Komponente, beforeRouteEnter:(to,from,next )= >{}

Wenn Sie in der Admin.vue-Datei auf klicken, um zur Admin-Route zu gelangen, führen Sie die beforeRouteEnter-Funktion

to aus, und der from-Parameter stimmt mit der obigen Verwendung überein. Die nächste Rückruffunktion ist etwas anders.

Wie im folgenden Beispiel gezeigt, gibt es Sonderfälle für Wächter in der Datenkomponente, wenn wir

• direkt verwenden. Dies liegt daran, dass auf unsere Datenattribute derzeit nicht zugegriffen werden kann und die Ausführungsreihenfolge inkonsistent ist, was mit dem Deklarationszyklus zusammenhängt. Bevor die Ausführung abgeschlossen ist, wurden die Daten nicht gerendert. Hier gibt next() einen entsprechenden Rückruf aus, um den Abschluss zu erleichtern.

• <script>
  export default {
      data(){
          return{
              name:"Arya"
          }
      },
      beforeRouteEnter:(to,from,next)=>{
          next(vm=>{
              alert("hello" + vm.name);
          })
      }
  }
  </script>

• 
  beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}进行访问admin页面，会发现alert输出hello undefined

2. Wenn Sie diese Komponente verlassen, legen Sie beforeRouteLeave:(to,from,next)=>{}

fest, ob Sie das Verlassen bestätigen möchten. Bestätigen Sie die Ausführung von next(); brechen Sie die Ausführung von next(false) ab und bleiben Sie auf der aktuellen Seite.

beforeRouteLeave:(to,from,next)=>{
        if(confirm("确定离开此页面吗？") == true){
            next();
        }else{
            next(false);
        }
    }

3. Routing exklusiver Guards

1 beforeEnter:(to,from,next)=>{}, die Verwendung stimmt mit dem globalen Guard überein. Schreiben Sie es einfach in eines der Routing-Objekte und es funktioniert nur unter dieser Route.

Weitere Programmierkenntnisse finden Sie unter:

Programmiervideo

! !

Das obige ist der detaillierte Inhalt vonWelche drei Arten von Vue-Routing-Guards gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!