ナビゲーションガード

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

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 === &#39;/login&#39;) { // 有 token还要去login
      next(&#39;/&#39;)
      NProgress.done() // 关闭进度条
    } else { // 有 token，去其他页面，放行
      if (!userId) {
        await store.dispatch(&#39;user/getUserInfo&#39;)
      }
      next()
    }
  } else {
    if (to.path === &#39;/login&#39;) { // 没有token，去login，放行
      next()
    } else {
      next(&#39;/login&#39;) // 没有token，去其他页面
      NProgress.done()
    }
  }
})

ログイン後にコピー

要約

3 つのパラメーター))

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) => { // ... })</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 の新機能)

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`
  }
}

ログイン後にコピー