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

青灯夜游
リリース: 2021-11-08 18:55:39
転載
2180 人が閲覧しました

この記事では、面接で聞かれなければならないこと、つまり 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# を受け入れません。 ## この関数はナビゲーション自体を変更しません: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">router.afterEach((to, from) =&gt; { // ... })</pre><div class="contentsignin">ログイン後にコピー</div></div>

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

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

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

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

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

ガード:

const router = new VueRouter({
  routes: [
    {
      path: &#39;/foo&#39;,
      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 サイトの他の関連記事を参照してください。

ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート