vue ルーティングをインターセプトするいくつかの方法

フロントエンド テクノロジの継続的な開発に伴い、vue フレームワークは開発者の間でますます支持されています。 Vue プロジェクトを開発する場合、ルーティングは非常に重要なコンポーネントです。ルーティングにより、シングル ページ アプリケーション (SPA) のページ切り替えやコンポーネントの再利用が実現され、プロジェクトのパフォーマンスとユーザー エクスペリエンスが向上します。プロジェクトのセキュリティと信頼性を確保するには、不正なリクエストをブロックまたはリダイレクトするインターセプターをルーティングに追加する必要があります。この記事では、Vue ルーティング インターセプトの原理と実装方法をすぐに理解できるように、Vue ルーティング インターセプトのいくつかの方法を紹介します。

1. グローバル フロント ガード

Vue Router は、ルーティングの切り替え前にリクエストをインターセプトできるグローバル フロント ガードを提供します。グローバル プレガードを使用すると、ユーザーがログインしているかどうかを確認したり、ユーザーがページにアクセスする権限を持っているかどうかを確認したりできます。次のコードを router/index.js に追加します。

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token') ? true : false;
  if (to.path == "/login") {
    next();
  } else {
    isLogin ? next() : next('/login');
  }
})

このコード スニペットは、各ルートが切り替わる前に実行され、ユーザーがログインしているかどうかが判断されます。ログインしていない場合は、ログイン ページにジャンプします。これは非常に一般的なグローバル ルート インターセプト方法であり、ユーザーのセキュリティとシステムの安定性を効果的に確保できます。

2. ルート排他的ガード

Vue Router では、ルートごとに個別のガードを設定できます。このタイプのガードはルート排他的ガードと呼ばれます。ルート排他的ガードは、ルート パラメーターの確認、非同期インターフェイスの呼び出し、データの処理などに使用できます。次のコードを router/index.js に追加します:

const router = new VueRouter({
  routes: [
    {
      path: '/example/:id',
      component: Example,
      beforeEnter: (to, from, next) => {
        const id = to.params.id;
        if (id > 0 && id < 100) {
          next();
        } else {
          next('/error');
        }
      }
    }
  ]
})

このコード スニペットは、ルート /example/:id の切り替え前に実行されます。渡されたパラメーター ID が条件を満たしているかどうかを確認し、満たしている場合はジャンプします。 「/error」ページに移動するか、そうでない場合はルーティングの切り替えを続行します。経路排他ガードは、より柔軟に経路切り替えを制御できる非常に柔軟な経路遮断方式です。

3. グローバル ポスト フック

グローバル フロント ガードと同様に、Vue Router はルーティング切り替え後の応答を傍受できるグローバル ポスト フックも提供します。グローバル ポスト フックは、ページ統計やエラー処理など、ルーティング切り替え後のいくつかの論理的な問題を処理するために使用できます。次のコードを router/index.js に追加します。

router.afterEach(( to, from ) => {
  const currentPath = to.path;
  const params = to.params;
  console.log(`切换到${currentPath}页面，路由参数为${JSON.stringify(params)}`)
})

このコード スニペットは、各ルーティング スイッチの後に実行され、現在のルーティング ページのパスとパラメーターを出力します。グローバル ポスト フックを通じて、ルーティング ステータスと、プロジェクトの開発とテストの次のステップに対応する結果をよりよく理解できます。

概要:

Vue Router では、ルート インターセプトはシステムの信頼性、セキュリティ、安定性を強化するために使用できる非常に重要なコンポーネントです。グローバル フロント ガード、ルート専用ガード、およびグローバル ポスト フックを通じて、ルートのステータスと動作をより適切に制御できます。実際の開発プロセスでは、プロジェクトの全体的な品質とユーザー エクスペリエンスを確保するために、プロジェクトの実際の状況に基づいて適切なルート インターセプト方法を選択する必要があります。

以上がvue ルーティングをインターセプトするいくつかの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。