vue-routerフック関数はルーティングガードを実装します

概要

ルートガードとは何ですか?ルートガードは、リクエストが送信される前にそれをインターセプトし、リクエストを送信する前に何かを行う Ajax リクエストインターセプターに少し似ています。ここでのルートガードは同様の意味を持ちます。簡単に言えば、ルートに入る前に停止してチェックするということです。これは中学校の門の警備員のようなものでしょうか。入場前に停止し、学生証を持っている場合は入場を許可しますが、学生証を持っていない場合は入場を許可しません。もちろん、ルーティングガードは入場前に停止するだけでなく、他の操作を実行するためのフック関数もあります。

Vue-router は、ルーティングガードを実装するための 3 種類のフック関数を提供します。

1. グローバルフック関数（beforeEach、afterEach）

2. ルーティング固有のフック関数（beforeEnter）

3. コンポーネント内のフック関数（beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave）

まず、グローバルフック関数を見てみましょう。

グローバルフック関数

それぞれの前:

beforeEach は、to、from、next の 3 つのパラメータを受け取ります。to: 入るルートオブジェクト。from: 出るルートオブジェクト。next: ルートの制御パラメータ。

次に呼び出す方法は 4 つあります。

next(): すべてがうまくいけば、このメソッドを呼び出して次のフックに入ります。

next(false): ルートナビゲーションをキャンセルします。この時のURLはこれから出発するルートアドレスを表示します。

next('/login'): 現在のルートを終了し、新しいルートナビゲーションに入ります（ルートアドレスは自由に指定できます）

next(error): ルートナビゲーションが終了し、router.onError() によって登録されたコールバックにエラーが渡されます。

通常、ログインせずにページに入るときにログインページにジャンプする、現在のページにアクセスするためにユーザーが到達する必要があるレベルなど、権限を制御するためにグローバルフックを使用します。これらはすべてページ権限の制御であり、beforeEach フック関数を通じて実現できます。

main.js (グローバルフック関数は通常 main.js に記述されます):

// ルートに入る前のメソッドフック router.beforeEach((to, from, next) => {
  console.log(to, '最初のパラメータを先頭に追加')
  console.log(from, '2番目のパラメータを先頭に追加')
  console.log(次に、'3番目のパラメータを先頭に追加')
  /
    ソースルートからターゲットルートへ、次のルートへジャンプ*/
//ここでは、local と storange を使用して権限の検証をシミュレートします if (window.localstorange.getItem("token")) {
    // 存在する場合は、対応するルートに直接ジャンプします next();
  } それ以外 {
    // 存在しない場合はログインページに移動します next('/login');
  }
});

それぞれの後:

AfterEach は beforeEach と同様にグローバルガードフックであり、main.js で呼び出されます。AfterEach には beforeEach よりも 1 つ少ない next パラメータがあります。

from: 出発しようとしているルートオブジェクト。

afterEach() は通常、ページのスクロールバーの位置をリセットするために使用されます。

非常に長いページがあり、その中の特定の位置までスクロールすると、新しいページのスクロールバーの位置は前のページがあった位置になります。このとき、afterEach を使用してリセットできます。

//グローバルルート変更フック router.afterEach((to, from) => {
  //スクロールバーを一番上に戻します。window.scrollTo(0, 0);
})

ルーティング固有のフック関数

前入力:

名前が示すように、指定されたルートにのみこれらのフック関数があります。通常、これらのフック関数はルート設定ファイルで設定します。変更前のフックのみ設定でき、変更後のフックは設定できません。

const ルーター = 新しい VueRouter({
    ルート
});
定数ルート = [
    {
        パス:'/page1',
        コンポーネント:ページ1、
        子供たち： [
            {
                パス: "電話",
                コンポーネント: 電話
            },
            {
                パス: "コンピュータ",
                コンポーネント: コンピュータ
            },
        ]、
//ルート限定フック関数 beforeEnter:(to,from,next)=>{
            console.log(に);
            console.log(から);
            次へ(偽);
        }
    },

上記のコードは、beforeEnter フックが /page1 に入ったときにのみトリガーされることを意味します。他のページに入った場合はトリガーされません。

コンポーネント内のフック関数

beforeRouteEnter(to,from,next):

ルートに入る前に呼び出されます。この時点では Vue インスタンスが作成されていないため、beforeEnter はこれを使用できない唯一のフック関数です。

to: 入力するルートオブジェクト。

from: 出発しようとしているルートオブジェクト。

次へ: ルーティング制御パラメータ

ルート更新前(to、from、next):

前回の記事で説明した動的ルートパラメータ転送など、ルートが変更されたときに呼び出されます。この場合は beforeRouteUpdate も呼び出されます。

to: 入力するルートオブジェクト。

from: 出発しようとしているルートオブジェクト。

次へ: ルーティング制御パラメータ。

ルート出発前(出発地、出発地、次):

ルートがコンポーネントを離れるときに呼び出されます。

to: 入力するルートオブジェクト。

from: 出発しようとしているルートオブジェクト。

次へ: ルーティング制御パラメータ

注: beforeRouteEnter がトリガーされたときに vue インスタンスが作成されていないため、このフック関数では使用できませんが、beforeRouteUpdate と beforeRouteLeave は、これら 2 つの関数がトリガーされたときにインスタンスが作成されているため、インスタンスにアクセスできます。

コンポーネント内でフック関数を呼び出す場合、通常はコンポーネント内で呼び出します。例:

<テンプレート>
    <div>
        <h1 id="h1">ホーム</h1>
        <p>
            <router-link to="/page1/phone">携帯電話</router-link>
            <router-link to="/page1/computer">コンピュータ</router-link>
        </p>
        <ルータービュー></ルータービュー>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
    //ルートに入る前に呼び出す beforeRouteEnter (to, from, next) {
    window.document.title = "ようこそ";
    次（）;
  },
    //ルートが変更されたときにbeforeRouteUpdate(to,from,next)を呼び出す{

  },
   //ルートが出発するときに呼び出されます beforeRouteLeave(to,from,next){

  },
        データ （） {
            戻る {
                メッセージ: 「私はページ1コンポーネントです」
            }
        },
    }
</スクリプト>