vue.js コンポーネント内のナビゲーション ガードの概要

この記事では、vue.js コンポーネント内のナビゲーション ガードについて説明します。必要な方は参考にしていただければ幸いです。

コンポーネントには 3 種類のガードがあります

beforeRouteEnter

beforeRouteUpdate (2.2 の新機能)

beforeRouteLeave

① beforeRouteEnter コンポーネントに入る前

前に呼ばれた、コンポーネント インスタンスはまだ作成されていないため、this キーワードは使用できません进入该组件之前被调用，组件实例还没有被创建，不能使用 this关键字

不过，你可以通过传一个回调给 next

ただし、コールバックを next に渡すことでコンポーネント インスタンスにアクセスできます。 call back through next インスタンス化されたコンポーネントは NEXT 関数の VM パラメータを次のように使用します

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

e

②beformeteLeave でコンポーネントから抜けた後、コンポーネントから抜けます O er o BeforrateupDate このコンポーネントは、コンポーネントが呼び出されたときに呼び出されます。再利用すると、このキーワードを呼び出すことができます

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

関連する推奨事項:

Vue.js グローバルルーティングのグローバルルート下のナビゲーションガード

Vue.js ルート表示設定方法紹介

以上がvue.js コンポーネント内のナビゲーション ガードの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。