beforeEach がナビゲーション ガード ケースを実装するチュートリアル

今回はnavigationguard beforeEachを実装する方法についてのチュートリアルをお届けします。navigation Guard beforeEachを実装する際の注意事項は何ですか?

ルーティングログイン検証 (ログインしていない場合はログイン ページに移動する) など、ジャンプする前にいくつかの検証を行うことは、Web サイトでは一般的な要件です。この点、vue-route が提供する beforeRouteUpdate はナビゲーション ガード (navigation-guards) を簡単に実装できます。

navigation-guards という名前は奇妙に聞こえますが、公式ドキュメントではこのように翻訳されているため、そう呼ぶことにします。

ドキュメントのアドレスを貼り付けます: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

まず、ドキュメント内の beforeRouteUpdate の使用法を抜粋してみましょう:

router を使用できます.beforeEach グローバル フロント ガードを登録します:

const router = new VueRouter({ ... }) 
router.beforeEach((to, from, next) => { 
 // ... 
})

ナビゲーションがトリガーされると、グローバル フロント ガードが作成順に呼び出されます。ガードは非同期で解析および実行されます。現時点では、ナビゲーションはすべてのガードが解決されるまで待機します。

各ガードメソッドは 3 つのパラメータを受け取ります:

to: Route: 進入しようとしているターゲットルートオブジェクト

from: Route: 現在のナビゲーションが出発しようとしているルート

next: Function:このメソッドはこのフックを解決します。実行効果は、次のメソッドの呼び出しパラメータによって異なります。

next(): パイプラインの次のフックに進みます。すべてのフックが実行されると、ナビゲーションのステータスが確認されます。

next(false): 現在のナビゲーションを中断します。ブラウザの URL が変更されると (おそらくユーザーが手動で、またはブラウザの [戻る] ボタンによって)、URL アドレスは from ルートに対応するアドレスにリセットされます。

next('/') または next({ path: '/' }): 別のアドレスにジャンプします。現在のナビゲーションが中断され、新しいナビゲーションが開始されます。

next(error): (2.4.0+) next に渡されたパラメータが Error インスタンスの場合、ナビゲーションは終了し、エラーは router.onError() によって登録されたコールバックに渡されます。

必ず次のメソッドを呼び出してください。そうしないとフックが解決されません。

前のブログで、コースや注文を含むアカウント ページは、ジャンプする前にログインしているかどうかを判断する必要があります。ログインしている場合は、ログイン ページに移動してホームページにジャンプします。 :

const vueRouter = new Router({ 
  routes: [ 
    //...... 
    { 
     path: '/account', 
     name: 'account', 
     component: Account, 
     children: [ 
      {name: 'course', path: 'course', component: CourseList}, 
      {name: 'order', path: 'order', component: OrderList} 
     ] 
    } 
  ] 
}); 
vueRouter.beforeEach(function (to, from, next) { 
  const nextRoute = [ 'account', 'order', 'course']; 
  const auth = store.state.auth; 
  //跳转至上述3个页面 
  if (nextRoute.indexOf(to.name) >= 0) { 
    //未登录 
    if (!store.state.auth.IsLogin) { 
      vueRouter.push({name: 'login'}) 
    } 
  } 
  //已登录的情况再去登录页，跳转至首页 
  if (to.name === 'login') { 
    if (auth.IsLogin) { 
      vueRouter.push({name: 'home'}); 
    } 
  } 
  next(); 
});

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSに元の値と参照値を保存する方法

JSは正規表現を使用して生年月日を決定します

以上がbeforeEach がナビゲーション ガード ケースを実装するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。