Vue Router Composition API OnBeforeRouteLeave 导航守卫无效

Question

我需要在用户离开路线并要求确认之前显示模态。基于该确认，用户可以离开路线。问题是确认是一个承诺，OnBeforeRouteLeave 需要一个布尔值 return，我无法在 .then() 中执行此操作。我在他们的 API 上找不到任何东西，但是有什么方法可以使用吗？就像在以前版本的 vue 路由器中工作的 next() 或者可能更适合这种情况的钩子？

onBeforeRouteLeave((to, from, next) => {
      if(!isEqual(store.getters['product/getProduct'], initialState)) {
        Swal.fire({
          title: 'You want to leave the page?',
          text: `There are unsaved changes that will be lost.`,
          icon: 'warning',
          showCancelButton: true,
          buttonsStyling: false,
          cancelButtonColor: '#d33',
          confirmButtonColor: '#3085d6',
          confirmButtonText: 'Yes, leave!',
          customClass: {
            confirmButton: "btn font-weight-bold btn-light-primary",
            cancelButton: "btn font-weight-bold btn-light-primary",
          },
          heightAuto: false
        }).then((result) => {
          if (result.isConfirmed) {
            store.commit('product/resetState')
            next()
          }

        })
      }
      return false
    })

更新：

源代码上写着：

Add a navigation guard that triggers whenever the component for the current location is about to be left. Similar to beforeRouteLeave but can be used in any component. The guard is removed when the component is unmounted. On beforeRouteLeave there is a next function and yet when i use it i get:

Uncaught (in promise) Error: Invalid navigation guard

Answer 1

onBeforeRouterLeave() 有这个 signature:

export declare function onBeforeRouteLeave(leaveGuard: NavigationGuard): void

它有一个 void return 类型，这意味着不需要 return。

问题似乎是您的导航守卫仅在满足 if 条件时调用 next()，但 next() 也应在 else 中调用案例：

onBeforeRouteLeave((to, from, next) => {
  if(!isEqual(store.getters['product/getProduct'], initialState)) {
    Swal.fire(/*...*/)
      .then(() => {
        next()
      })
  } else {
    next()
  }
})

demo