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.

• 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');
    }
  })

  Nach dem Login kopieren

• 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");
  })

  Nach dem Login kopieren

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

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

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

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

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

Weitere Programmierkenntnisse finden Sie unter:

! !

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!