vue3で7種類のルーティングガードを使う方法

どのような種類のルーティング ガードがありますか?

ルーティング ガード (ナビゲーション ガード) は、グローバル ガード (3)、ルート専用ガード (1)、コンポーネント ガード (3) の 3 種類に分類されます。

3 種類のルーティング ガード パラメータ

to: ジャンプ先のターゲット ルート

from: どの現在のルートからジャンプするか

next: ブロッキングなし、直接アクセス

注:特定のナビゲーション ガード内で次の関数が 1 回呼び出されることを確認します。これは複数回表示される可能性がありますが、すべての論理パスが重複していない場合に限り、重複しない場合はエラーが報告されます。

ケース:

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

1. グローバル ルーティング ガード

グローバル ルーティング ガードには、グローバル フロント ガード、グローバル ポスト ガード、グローバル パーシング ガードの 3 つがあります

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

1. 使用方法: main.js で設定され、ルートがジャンプする前にトリガーされます。このフックは主にログイン検証に使用されます。まだジャンプしてから通知が遅くならないように事前にジャンプを通知する

2. コード:

router.beforeEach((to,from,next)=>{})

3. 例: ログイン判定を行う

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您还没有登录，请先登录');
    next('/login');
  }
})

グローバルポストポジション Guard

1. 使用方法: main.js で設定します. beforeEach とは逆に、ルートジャンプが完了した後にトリガーされます. beforeEach と beforeResolve の後、および beforeRouteEnter の前に発生します (ガード内のガード)成分）。フックは次の関数を受け入れず、ナビゲーション自体も変更しません

2. コード:

router.afterEach((to,from)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})

グローバル解析ガード

1. 使用法: main.js で設定します。フックは beforeEach に似ていますが、ルートがジャンプする前にもトリガーされます。違いは、ナビゲーションが確認される前と、すべてのコンポーネントのガードと非同期ルーティング コンポーネントが解析された後、つまり beforeEach と beforeRouteEnter の後に呼び出されることです。コンポーネント内と、afterEach の前。

2. コード:

router.beforeResolve((to,from,next)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})

1. コンポーネント内のガード

コンポーネント内には 3 つのガードがあります: ルートに入る前の beforeRouteEnter、ルートに入る前の beforeRouteLeave Leaves, page 更新時 beforeRouteUpdate

• beforeRouteEnter(to, from, next)

1. 使用方法：コンポーネント内で使用テンプレート、メソッドが続きます: {} は同じレベルで記述されます。コンポーネントのルート ガードは、それぞれ別の vue ファイル

2 に記述されたルート ガードです。コード:

beforeRouteEnter(to, from, next) {
    // 在组件生命周期beforeCreate阶段触发
    console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
    next((vm) => {
      console.log('组件内路由前置守卫 vm', vm) // vm 就是this
    })
  },

beforeRouteUpdate(to, from、next)

1. 使用法: コンポーネント テンプレートで使用され、メソッドと同じレベルで記述されます: {}、コンポーネント ルーティング ガードは、それぞれ別個の vue ファイル

##2 に記述されたルーティング ガードです。コード:

beforeRouteUpdate (to, from, next) {
    // 同一页面，刷新不同数据时调用，
    // 可以访问组件实例 
}

• beforeRouteLeave(to, from, next)

1. 使用方法: メソッドを使用してコンポーネント テンプレートで使用します: {同じレベルで記述されたコンポーネント ルート ガードは、それぞれ別の vue ファイルに記述されたルート ガードです。

#2. コード:

beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例
}

ルート排他的ガード

#ルート排他的ガードは 1 つだけ: beforeEnter のルートに入るときにトリガーされます

#ルート排他的ガード beforeEnter(to, from, next)## 1. 使用方法:

router.js の

を使用します ルート排他ガードは、ルーティング設定ページでルートに対して個別に設定されるガードです

• 2. コード

  const router = new VueRouter({
    routes: [
      {
        path: '/foo',
        component: Foo,
        beforeEnter: (to, from, next) => {
          // ...
        }
      }
    ]
  })

ナビゲーション解析プロセス

1. 他のルートへのエントリをトリガーします2. コンポーネント ガードを呼び出して、ルートから離脱する beforeRouteLeave

3. グローバル フロント ガードを前に呼び出します

4 . 再利用されたコンポーネントで beforeRouteUpdate

を呼び出します。 5. ルーティング設定の単一ルートで beforeEnter

を呼び出します。 6. 非同期ルーティング コンポーネント

7. に入ろうとしているルーティング コンポーネントで beforeRouteEnter を呼び出します。 8. グローバルの解析ガードを呼び出す beforeResolve

9. ナビゲーションが確認される

10. グローバルのポストフック afterEach を呼び出す
11. マウントされた DOM 更新をトリガーする
12. 次に渡されたコールバック関数を実行するbeforeRouteEnterガード

以上がvue3で7種類のルーティングガードを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。