Einführung in Navigationswächter in vue.js-Komponenten

Der Inhalt dieses Artikels ist eine Einführung in den Navigationsschutz innerhalb der vue.js-Komponente. Ich hoffe, dass er für Freunde hilfreich ist.

Es gibt drei Arten von Wächtern innerhalb der Komponente

beforeRouteEnter

beforeRouteUpdate (neu in 2.2)

beforeRouteLeave

① beforeRouteEnter Vor dem Betreten der Komponente

进入该组件之前被调用，组件实例还没有被创建，不能使用 this关键字

Sie können jedoch bestehen ein Rückruf an next, um auf die Komponenteninstanz zuzugreifen, das heißt, Sie können die instanziierte Komponente über next zurückrufen und den VM-Parameter der nächsten Funktion wie folgt verwenden

    export default {
        name: "Admin",
        data(){
          return{
            infor:'hw'
          }
        },
      beforeRouteEnter:(to,from,next)=>{
          //此时该组件还没被实例化
          alert(this.infor);       //弹出消息框信息为 undefined
        next(vm =>{
          //此时该组件被实例化了
          alert(vm.infor);         //弹出消息框信息为 hw
        })
      }
    }

②beforeRouteLeave Leave Nach der Komponente

Wird nach dem Verlassen der Komponente aufgerufen, können Sie dieses Schlüsselwort

    export default {
      name: "Admin",
      beforeRouteLeave(to,from,next){
          if(confirm("确定离开吗？") == true){
            next()   //跳转到另一个路由
          }else{
            next(false);//不跳转
          }
      }
    }

③beforeRouteUpdate   

  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  }

Verwandte Empfehlungen:

Implementierung des Navigationsschutzes unter vue.js Globales Routing

Einführung in die Einstellungsmethode für die Routenanzeige von Vue.js

Das obige ist der detaillierte Inhalt vonEinführung in Navigationswächter in vue.js-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!