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

不言

リリース： 2018-08-23 16:38:43

オリジナル

1839 人が閲覧しました

この記事では、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:&#39;hw&#39;
          }
        },
      beforeRouteEnter:(to,from,next)=>{
          //此时该组件还没被实例化
          alert(this.infor);       //弹出消息框信息为 undefined
        next(vm =>{
          //此时该组件被实例化了
          alert(vm.infor);         //弹出消息框信息为 hw
        })
      }
    }

ログイン後にコピー

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

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

ログイン後にコピー