Vue-Router のナビゲーション フックの詳細な分析

この記事では、面接で聞かれなければならないこと、つまり Vue-Router のナビゲーション フックについて説明します。お役に立てば幸いです。

ナビゲーション ガード

「ナビゲーション」はルートが変更されていることを示します。

vue-router 提供されているナビゲーション ガードは、主にジャンプやキャンセルによってナビゲーションをガードするために使用されます。ルート ナビゲーション プロセスを組み込む機会は複数あります。グローバル、単一ルート専用、またはコンポーネント レベルです。 [関連する推奨事項: 「vue.js チュートリアル 」]

1. グローバル フロント ガード----router.beforeEach

##router.beforeEach グローバル フロント ガードの登録:

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  //  to:要去哪个页面
  //  from:从哪里来
  //  next:它是一个函数。
  //     如果直接放行 next()
  //     如果要跳到其它页 next(其它页)
})

サンプル コード:

router.beforeEach(async(to, from, next) => {
  NProgress.start() // 开启进度条
  const token = store.state.user.token
  const userId = store.state.user.userInfo.userId
  console.log(token, to.path, from.path)
  if (token) {
    if (to.path === '/login') { // 有 token还要去login
      next('/')
      NProgress.done() // 关闭进度条
    } else { // 有 token，去其他页面，放行
      if (!userId) {
        await store.dispatch('user/getUserInfo')
      }
      next()
    }
  } else {
    if (to.path === '/login') { // 没有token，去login，放行
      next()
    } else {
      next('/login') // 没有token，去其他页面
      NProgress.done()
    }
  }
})

要約

router.beforeEach (コールバック (
• 3 つのパラメーター))
ナビゲーション ガード関数では、必ず next()
• to.path: を呼び出してください。はルーティング オブジェクト、path はパスを表し、その属性の 1 つです

2. グローバル ポスト フック----router.afterEach

router.afterEach グローバル ポストフックを登録します:

グローバル ポストフックを登録することもできますが、ガードとは異なり、これらのフックは

next# を受け入れません。 ## この関数はナビゲーション自体を変更しません: <pre class="brush:js;toolbar:false;">router.afterEach((to, from) =&gt; { // ... })</pre>

3. グローバル解像度ガード----router.beforeResolve

2.5.0 では # を使用できます。 ##router.beforeResolve

を使用してグローバル ガードを登録します。これは

router.beforeEach と似ていますが、違いは、ナビゲーションが確認される前に ガードがすべてのコンポーネントに同時に存在し、非同期ルーティング コンポーネントが解析された後 であることです。パーシングガードが呼び出されます。 4. ルート専用ガード

ルーティング設定で直接定義できます beforeEnter

ガード:

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

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

##beforeRouteEnter

• ##beforeRouteUpdate (2.2 の新機能)
#beforeRouteLeave

• const Foo = {
    template: `...`,
    beforeRouteEnter(to, from, next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不！能！获取组件实例 `this`
      // 因为当守卫执行前，组件实例还没被创建
    },
    beforeRouteUpdate(to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
    },
    beforeRouteLeave(to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
    }
  }

• ナビゲーション解析プロセスを完了

ナビゲーションがトリガーされます。

非アクティブ化されたコンポーネントで
• beforeRouteLeave

  ガードを呼び出します。

• グローバル beforeEach ガードを呼び出します。

• 再利用されたコンポーネントで beforeRouteUpdate ガード (2.2) を呼び出します。

• ルーティング設定で beforeEnter を呼び出します。

• 非同期ルーティング コンポーネントを解決します。

アクティブ化されたコンポーネントで
• beforeRouteEnter

  を呼び出します。

• グローバル beforeResolve ガード (2.5) を呼び出します。

• #ナビゲーションを確認しました。
  グローバル
afterEach
• フックを呼び出します。

• DOM 更新をトリガーします。

beforeRouteEnter
• ガードの

  next

  に渡されたコールバック関数を呼び出すと、作成されたコンポーネント インスタンスがパラメータとして渡されます。コールバック関数。

• プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がVue-Router のナビゲーション フックの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。