vue ルーティングをインターセプトするいくつかの方法-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-23 18:33:38

オリジナル

4899 人が閲覧しました

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

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

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');
  }
})

ログイン後にコピー

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

ルート排他的ガード

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」ページに移動するか、そうでない場合はルーティングの切り替えを続行します。経路排他ガードは、より柔軟に経路切り替えを制御できる非常に柔軟な経路遮断方式です。

グローバルポストフック

グローバルフロントガードと同様に、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 サイトの他の関連記事を参照してください。