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

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

青灯夜游

リリース： 2023-01-13 00:45:17

オリジナル

15028 人が閲覧しました

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

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

このチュートリアルの動作環境: 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);
        }
    }

ログイン後にコピー