Vue ルーティング ガードの詳細な説明とその適用シナリオの分析

フロントエンド テクノロジの継続的な開発に伴い、開発フレームワークとしての Vue は開発者の間でますます人気が高まっています。 Vue のルーティング メカニズムも、Vue フレームワークの不可欠な部分です。ルーティング システムは、開発者が複雑な単一ページ アプリケーションを構築するのに役立つと同時に、ページ状態とユーザー ナビゲーションを管理する柔軟な方法も提供します。この場合、Vue ルーティング ガードは習得する必要がある知識ポイントになります。

それでは、Vue ルーティング ガードとは何ですか? Vue.js におけるルーティング ガードは、ページ間のジャンプを制御するための仕組みで、主にページ ナビゲーション時の権限確認やステータス管理などに使用されます。 Vue のルート ガードは主に、グローバル ルート ガード、ルート専用ガード、コンポーネント レベル ガードの 3 つのタイプに分類されます。

グローバル ルート ガード:

グローバル ルート ガードとは、すべてのルートが変更されたときに実行する必要があるコードのブロックを意味します。グローバル ルート ガードには主に 3 つのタイプがあります。

1. beforeEach(to、from、next)

ルートに入る前に呼び出され、権限の検証やその他の操作を実行できます。 to および from パラメータは、それぞれ、入力しようとしているルーティング オブジェクトとこれから出力しようとしているルーティング オブジェクトを表します。

サンプル コードは次のとおりです。

router.beforeEach((to, from, next) => {
  // 进行权限验证等操作
  if (to.meta.requireAuth) {
    if (localStorage.getItem('token')) {
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  } else {
    next();
  }
})

2. afterEach(to, from)

はルートに入った後に呼び出され、通常は操作に使用されます。ログ記録など。

サンプル コードは次のとおりです。

router.afterEach((to, from) => {
  // 记录日志等操作
})

3. beforeResolve(to, from, next)

ルートが解析された後に呼び出し、遅延のみを使用します。ルートの読み込み 場合によっては便利です。

サンプルコードは以下のとおりです:

router.beforeResolve((to, from, next) => {
  // 进行路由解析后的处理
  next();
})

ルート排他ガード:

ルート排他ガードは特定のルートに対するガードであり、現在のルートが入った場合のみガードされます。または葉の転送。使用方法は次のとおりです。

サンプル コードは次のとおりです。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 进行权限验证等操作
        if (localStorage.getItem('admin')) {
          next();
        } else {
          next({
            path: '/login',
            query: {redirect: to.fullPath}
          })
        }
      }
    }
  ]
})

コンポーネント レベル ガード:

コンポーネント レベル ガードは、コンポーネント内のナビゲーション ガードを指し、使用できます。コンポーネントの内部状態を管理します。コンポーネント レベルのガードには主に 4 つのタイプがあります。

1. beforeRouteEnter(to, from, next)

ルートに入る前に呼び出され、ルートの内部状態にアクセスするときに使用されます。成分。

サンプルコードは次のとおりです。

export default {
  data() {
    return {
      user: null
    }
  },
  beforeRouteEnter(to, from, next) {
    const user = localStorage.getItem('user')
    if (user) {
      // 访问不到组件实例
      next(vm => {
        vm.user = user
      })
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  }
}

2. beforeRouteLeave(to, from, next)

ルートが出発する前に呼び出され、使用できます。現在のルートまたは変更操作を保存するかどうかを確認します。

サンプル コードは次のとおりです。

export default {
  data() {
    return {
      text: ''
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.text !== '') {
      const confirmMsg = '您的修改还未保存，确定要离开吗？'
      if (confirm(confirmMsg)) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  }
}

3. beforeRouteUpdate(to, from, next)

現在のルートが更新されるときに呼び出されます。コンポーネントの内部状態を更新します。

サンプル コードは次のとおりです。

export default {
  data() {
    return {
      user: null
    }
  },
  beforeRouteUpdate(to, from, next) {
    const user = localStorage.getItem('user')
    if (user) {
      this.user = user
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  }
}

4. beforeRouteLeave(to, from, next)

はルートのレンダリング中に呼び出され、次の目的で使用できます。サーバー側レンダリング 操作を待ちます。

サンプル コードは次のとおりです。

export default {
  beforeRouteRender(to, from, next) {
    // 进行服务器端渲染等操作
    next();
  }
}

上記のルーティング ガードの紹介を通じて、ログインするかどうかの決定、権限検証の実行など、ルーティング ガードには多くのアプリケーション シナリオがあることがわかります。 、変更操作の保存など。シナリオが異なれば、異なるルーティング ガードの使用が必要になるため、開発中の処理に適切なガードを選択する必要があります。

つまり、Vue ルート ガードは非常に重要な部分であり、適切に使用すると、アプリケーションのセキュリティと安定性を大幅に向上させることができます。したがって、開発者はルート ガードの使用法とアプリケーション シナリオをより深く理解する必要があります。

以上がVue ルーティング ガードの詳細な説明とその適用シナリオの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。