vue-router 路由守卫

全局守卫(全局路由钩子函数)

const router = new VueRouter({
  routes: [...],
})

// 路由进入全局钩子函数
router.beforeEach((to, from, next) => {
  // 可以在这里进行一些全局的权限控制，例如检查用户是否登录等
  console.log('beforeEach', to, from)
  next()
})

// 路由解析全局钩子函数
router.beforeResolve((to, from, next) => {
  // 可以在这里进行一些全局的准备工作，例如显示全局 loading 等
  console.log('beforeResolve', to, from)
  next()
})

// 路由跳转后全局钩子函数
router.afterEach((to, from) => {
  // 可以在这里进行一些全局的统计工作，例如上报 PV 等
  console.log('afterEach', to, from)
})

这些钩子函数都是全局路由钩子函数，可以对整个应用程序的路由跳转进行控制。其中，

这些钩子函数都接收三个参数：to、from 和 next。to 和 from 分别是路由进入和离开的目标和来源路由对象。next 是一个回调函数，用于控制路由跳转。在钩子函数中必须调用 next 方法才能继续进行路由跳转，否则路由会被阻止。

局部守卫(组件路由级别的钩子函数)

export default {
  // 在路由进入该组件前执行的钩子函数
  beforeRouteEnter(to, from, next) {
    // 可以在这里进行一些准备工作，例如获取数据等
    console.log('beforeRouteEnter', to, from)
    next()
  },

  // 在路由离开该组件前执行的钩子函数
  beforeRouteLeave(to, from, next) {
    // 可以在这里进行一些清理工作，例如取消订阅等
    console.log('beforeRouteLeave', to, from)
    next()
  },

  // 在路由更新但是仍然在该组件内时执行的钩子函数
  beforeRouteUpdate(to, from, next) {
    // 可以在这里更新组件的状态，例如重新获取数据等
    console.log('beforeRouteUpdate', to, from)
    next()
  }
}

这些钩子函数是 Vue Router 提供的路由级别的钩子函数，可以在组件中使用。其中，beforeRouteEnter 钩子函数在路由进入该组件前执行，可以在这里进行一些准备工作，例如获取数据等。beforeRouteLeave 钩子函数在路由离开该组件前执行，可以在这里进行一些清理工作，例如取消订阅等。beforeRouteUpdate 钩子函数在路由更新但是仍然在该组件内时执行，可以在这里更新组件的状态，例如重新获取数据等。