vue3 路由导航守卫

Vue3的路由导航守卫与Vue2的路由导航守卫基本相同，但是有一些细微的差别。在Vue3中，可以使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave这三个守卫。

1. beforeRouteEnter

beforeRouteEnter守卫在路由进入前被调用。在这个守卫中，访问不到组件实例，因此需要使用next函数来传递组件实例。

const routes = [
  {
    path: '/user/:id',
    component: User,
    beforeRouteEnter(to, from, next) {
      // 在这里访问不到组件实例
      next(vm => {
        // 通过next函数传递组件实例
        vm.getUserInfo()
      })
    }
  }
]

2. beforeRouteUpdate

beforeRouteUpdate守卫在路由更新时被调用，在该守卫中可以访问到组件实例，可以在此更新组件数据。

const routes = [
  {
    path: '/user/:id',
    component: User,
    beforeRouteUpdate(to, from, next) {
      // 在这里可以访问到组件实例
      this.getUserInfo()
      next()
    }
  }
]

3. beforeRouteLeave

beforeRouteLeave守卫在路由离开时被调用。可以在该守卫中进行一些操作，例如提示用户是否离开页面。

const routes = [
  {
    path: '/user/:id',
    component: User,
    beforeRouteLeave(to, from, next) {
      if (confirm('确定离开页面吗？')) {
        next()
      } else {
        next(false)
      }
    }
  }
]