Vue ルーティングガードにはどのような種類がありますか?-Vue.js-php.cn

Vue ルーティングガードにはどのような種類がありますか?

青灯夜游

リリース： 2020-11-17 16:35:59

オリジナル

10660 人が閲覧しました

vue ルーティングガードには 3 つのタイプがあります: 1. グローバルガード "router.beforeEach"; 2. コンポーネント内のガード "beforeRouteEnter"; 3. ルート専用ガード "beforeEnter"。

Vue ルーティングガードにはどのような種類がありますか?

Vue には、グローバルルーティングガード、コンポーネント内ルーティングガード、およびルート排他的ガードの 3 種類のルーティングガードがあります。

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

 // 通过这个匹配判断是否有该权限或要求，这个一般作为页面权限设置，比如哪些页面需要登录才能进入，哪些不需要
to.matched.some(res => res.meta.requireAuth)

ログイン後にコピー

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 つのパラメータしかありません。行くルートを入力します。出発地: どのルートから出発しますか。
以下のように、ルートを切り替えるたびにアラートが表示され、[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() は、完了を支援するために対応するコールバックを提供します。

ログイン後にコピー

Vue ルーティングガードにはどのような種類がありますか?

2. このコンポーネントを離れるときは、beforeRouteLeave:(to,from,next)=>{}

Click他のコンポーネントを使用する場合、出発を確認するかどうかを決定します。 next() の実行を確認し、next(false) の実行をキャンセルして現在のページに留まります。

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

ログイン後にコピー