Vue 路由守卫(导航钩子函数)

1. 路由守卫(导航钩子函数)

1.1 beforeEach: 全局前置守卫

const router = new VueRouter({}) 

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

1.2 beforeEnter: 路由独享的守卫(路由内钩子)

routes: [
  {
    path: '/person',
    component: () => import(''),
    beforeEnter: (to, from, next) => { }       
  }
]

---

2. 组件内的守卫(组件内钩子)

2.1 beforeRouteEnter

beforeRouteEnter (to, from, next) { 
  // 在渲染该组件的对应路由被 confirm 前调用 
  // 不能获取组件实例 this
  // 因为当守卫执行前，组件实例还没被创建 
}

不过，可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

2.2 beforeRouteUpdate

beforeRouteUpdate(to, from, next) {
  // 在当前路由改变，或者该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， 
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 this
}

2.3 beforeRouteLeave

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

应用场景：

2.3.1 清除当前组件中的定时器

// 当一个组件中有一个定时器时, 在路由进行切换的时候, 可使用 beforeRouteLeave 将定时器进行清除, 以免占用内存(可以用 destroyed 生命周期钩子函数代替)
beforeRouteLeave(to, from, next) {
  clearInterval(this.timer);
  next()
}

2.3.2 当页面中有未关闭的窗口，或未保存的内容时,，阻止页面跳转

beforeRouteLeave(to, from, next) {
  if (this.isShow) {
    alert('必须关闭弹窗才能跳转页面');
    next(false);
  } else {
    next();
  }
}

2.3.3 保存相关内容到Vuex中或Session中(可以用destroyed生命周期钩子函数代替)

beforeRouteLeave(to, from, next) {
  sessionStorage.setItem(name, content); // 保存到sessionStorage中
  next()
}