3 種類の Vue ルーティング ガードとは何ですか?

Vue には 3 種類のルーティング ガードがあります。すなわち、グローバル ルーティング ガード (グローバル フロント ガード、グローバル ポスト ガード)、コンポーネント内ルーティング ガード、およびルート排他的ガード (ルーティング設定で個別に指定されます) です。ページ)。ルーティング設定のガード)。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

ルート ガードはルート インターセプトにもできます。ルート インターセプトを使用して、ユーザーがログインしているかどうか、およびユーザーがページを参照する権限を持っているかどうかを判断できます。

を実装するには、メタと組み合わせる必要があります。

vue のルートガード グローバルルーティングガード、コンポーネント内ルーティングガード、ルーターエクスクルーシブガードの合計 3 種類あります

いわゆるルーティングガード簡単に言えば、家の玄関にいる警備員と理解できます。家に入りたい場合は、セキュリティチェックを通過し、巡回警備員にどこから来たのかを伝えなければなりません。知らない人を勝手に入れてはいけないのですか？どこへ行く？そして警備員は次に何をすべきかを指示しますか？家の所有者が本当に立ち入りを許可している人であれば、立ち入りが許可されますが、そうでない場合は、家の所有者に電話し、所有者と話し合って（ログインして登録し）、許可を得る必要があります。許可。

1. グローバル ガード

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

2. コールバック関数のパラメータ、to: どのルートに入るか、from: どのルートから出るか、next: 関数によって、表示したいルーティング ページを表示するかどうかが決まります。

3. 次の例を見てみましょう: main.js にグローバル ガードを設定します。

• main.js には、ルーティング インスタンス化オブジェクト ルーターがあります。 。 main.js でのガードの設定は、すでにグローバル ガードになっています。
• 以下のように、to.path が現在入っているパスがログインか登録かを判断し、登録の場合は next() を実行して現在のインターフェースを表示します。そうでない場合は、アラートがポップアップ表示され、ログイン インターフェイスに移動します。
• ユーザーがログインしていないときは、常にログイン インターフェイスが表示されます。

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

4. グローバル ポスト フック router.afterEach((to,from)=>{})

• パラメータは 2 つだけです。 : どのルートから入るか、From: どのルートから出るか。
• 以下のように、ルートを切り替えるたびにアラートが表示され、[OK]をクリックすると現在のページが表示されます。

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

5.store.gettes.isLogin === false がログインしているかどうかを確認します

2.コンポーネント内のガード

1. このコンポーネントに到達したら、beforeRouteEnter:(to,from,next)=>{}

• Admin.vue ファイルで、管理者がルーティングするときに、beforeRouteEnter 関数
• to を実行します。from パラメーターは上記の使用法と一致しています。次のコールバック関数は少し異なります。
• 次の例に示すように、データ コンポーネントのガードには特別な状況があります。
  beforeRouteEnter:(to,from,next)=>{alert(" を直接使用する場合hello" this.name); }管理ページにアクセスすると、アラートに hello unnamed が出力されることがわかります。これは、現在データ属性にアクセスできず、宣言サイクルに関連して実行順序が一貫していないためです。実行が完了するまで、データ データはレンダリングされていません。したがって、ここで next() は、完了を支援するために対応するコールバックを提供します。

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

2. このコンポーネントを終了するときは、 beforeRouteLeave:(to,from,next)=> となります。 {}

• 他のコンポーネントをクリックする場合、確認して終了するかどうかを決定します。 next() の実行を確認し、next(false) の実行をキャンセルして現在のページに留まります。

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

3. ルート排他ガード

1. beforeEnter:(to,from,next)=>{}、使用法と一貫しています。世界的な警備員。これをルーティング オブジェクトの 1 つに書き込むだけで、このルートでのみ機能します。

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

以上が3 種類の Vue ルーティング ガードとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。