Vue-Router: ルーティングの変更を処理するためにルーティング フック関数を使用する方法は?

Vue-Router: ルーティングフック関数を使用してルーティングの変更を処理するにはどうすればよいですか?

はじめに:
Vue-Router は Vue.js の公式ルーティング管理プラグインで、Vue.js アプリケーションでシングルページ アプリケーションのルーティング機能を実装するのに役立ちます。基本的なルーティング ナビゲーション機能に加えて、Vue-Router はルーティング変更時に対応する操作を実行できる一連のフック関数も提供します。この記事では、Vue-Router のフック関数と、それらを使用してルーティングの変更を処理する方法を紹介します。

1. Vue-Router のフック関数
Vue-Router には、グローバルフック関数、ルート専用フック関数、コンポーネント内フック関数の 3 種類のフック関数があります。

1. グローバルフック関数
   グローバルフック関数は、各ルートのナビゲーションがトリガーされたときに呼び出されます。 Vue-Router は、次のグローバル フック関数を提供します。
2. beforeEach(to、from、next): ルート ナビゲーションの前に呼び出され、権限の検証またはグローバルな事前操作に使用できます。
3. afterEach(to, from): ルート ナビゲーションの後に呼び出され、グローバルな事後操作を実行するために使用できます。
4. ルーティング排他フック関数
   ルーティング排他フック関数は、特定の経路に対してのみ呼び出されます。 Vue-Router は、次のルート専用フック関数を提供します。
5. beforeEnter(to, from, next): ルートに入る前に呼び出され、ルート上で事前操作を実行するために使用できます。
6. コンポーネント内のフック関数
   コンポーネント内のフック関数は、コンポーネントがルートに移動するときに呼び出されます。これらのフック関数は、次のような Vue.js のライフサイクル フック関数に似ています。
7. beforeRouteEnter(to, from, next): ルートがコンポーネントに入る前に呼び出されますが、コンポーネント インスタンスはまだ作成されていませんコンポーネント インスタンスの this にアクセスすることはできません。
8. beforeRouteUpdate(to, from, next): コンポーネントがすでに存在するがルートが変更される場合に呼び出され、コンポーネント インスタンスのこれにアクセスできます。
9. beforeRouteLeave(to, from, next): 現在のルートから離れるときに呼び出され、コンポーネント インスタンスのこれにアクセスできます。

2. フック関数を使用してルーティングの変更を処理する方法
次に、サンプル コードを使用して、Vue-Router のフック関数を使用してルーティングの変更を処理する方法を示します。

1. #グローバルフック関数の例

   // 创建路由实例
   const router = new VueRouter({
     routes: [
    // 路由配置
     ]
   });
   
   // 全局前置守卫
   router.beforeEach((to, from, next) => {
     // 在路由导航之前进行权限验证
     if (to.meta.authRequired && !store.state.isAuthenticated) {
    next('/login');
     } else {
    next();
     }
   });
   
   // 全局后置钩子
   router.afterEach((to, from) => {
     // 在路由导航之后进行一些操作，比如记录日志
     logRouteChange(to, from);
   });

   ログイン後にコピー

2. ルーティング専用フック関数の例

   // 路由配置
   const routes = [
     {
    path: '/admin',
    component: AdminComponent,
    beforeEnter: (to, from, next) => {
      // 在进入 AdminComponent 之前进行权限验证
      if (to.meta.authRequired && !store.state.isAdmin) {
        next('/login');
      } else {
        next();
      }
    }
     }
   ];

   ログイン後にコピー

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

   // 组件配置
   export default {
     // 组件内的钩子函数
     beforeRouteEnter(to, from, next) {
    // 在路由进入组件前进行一些操作
    next();
     },
     beforeRouteUpdate(to, from, next) {
    // 在路由变化时进行一些操作
    next();
     },
     beforeRouteLeave(to, from, next) {
    // 在离开当前路由时进行一些操作
    next();
     }
   }

   ログイン後にコピー

Vue-Routerのフック関数を使用することで、権限の検証やグローバルな前後処理操作など、ルーティングの変更をより柔軟に処理できます。コンポーネント内でいくつかの操作を実行します。この記事がルーティング フック機能の理解と使用に役立つことを願っています。

以上がVue-Router: ルーティングの変更を処理するためにルーティング フック関数を使用する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。