技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Vue では、ルート インターセプターは主に、特定のルートに移動する前、または特定のルートから離れるときにインターセプトして処理するために使用されます。このメカニズムにより、開発者はルート ナビゲーションが発生する前または後に、権限の検証、データの読み込み、ページ ジャンプなどの特定のロジックを実行できます。

Vue Router では、ルート インターセプターは次の方法で実装できます。

1. グローバルビフォーガード:

   • router.beforeEach(to, from, next): グローバルプレガードを登録すると、ルートナビゲーションがトリガーされると、ルートが変更される前にガードが呼び出されます。
   • 目的: グローバル権限の検証、ページ読み込みのプログレスバー制御などに適しています。

     router.beforeEach((to, from, next) => {
         // 检查用户权限
         if (!userAuthenticated) {
             next('/login'); // 未认证跳转到登录页
         } else {
             next(); // 已认证则放行
         }
     });
     

2.グローバルリゾルブガード:

• router.beforeResolve(to, from, next): グローバル解析ガードを登録します。これは、グローバル フロント ガードの後、ナビゲーションが確認される前に呼び出されます。

  router.beforeResolve((to, from, next) => {
      // 在导航被确认之前，进行数据加载等操作
      fetchData().then(() => {
          next();
      });
  });
  

3. ルートごとのガード:

• ルーティング設定オブジェクトに直接追加します。beforeEnter単一のルートにガード ロジックを追加するフィールド。

const route = {
    path: '/profile',
    component: Profile,
    beforeEnter: (to, from, next) => {
        // 检查用户是否有权限访问该路由
        if (userHasAccess) {
            next();
        } else {
            next('/403'); // 没有权限跳转到403页面
        }
    }
};

 

4.コンポーネント内ガード:

• コンポーネント内で使用されるbeforeRouteEnter, beforeRouteUpdate、 そしてbeforeRouteLeaveフック関数。これらの関数は、ルートが現在のコンポーネントに移動するとき、現在のコンポーネントが再利用されるとき、および現在のコンポーネントが離れるときに呼び出されます。

export default {
    beforeRouteEnter (to, from, next) {
        // 在路由导航进入该组件前执行逻辑
        next(vm => {
            // 可以访问实例 `vm`
        });
    },
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 可以访问组件实例 `this`
        // 通常用于更新组件的数据
        next();
    },
    beforeRouteLeave (to, from, next) {
        // 在导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        next();
    }
}

これらのルート インターセプターのメカニズムは、開発者がさまざまなレベルやシナリオでアプリケーションのナビゲーション プロセスを制御し、権限制御、データのプリロード、ページ ジャンプなどの機能を実装するのに役立ち、それによってフロントエンド アプリケーションの対話型エクスペリエンスの管理と最適化が向上します。