如何在Nuxt中使用onBeforeRouteLeave？

Question

我是 Nuxt 新手，我无法找到如何在 Nuxt 中通过组合 API 使用 onBeforeRouteLeave

如果可以给我一个例子那就太好了谢谢

Answer 1

Nuxt 3 使用 Vue Router 进行路由。该文档在BeforeRouteLeave Here。

OnBeforeRouteLeave 充当守卫，防止页面在任务完成之前离开。这是您可能熟悉的如何使用它的示例！

onBeforeRouteLeave (to, from) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (!answer) return false
}

Answer 2

import { onBeforeRouteLeave } from "vue-router"; (optional)

// import the method from the vue-router to avoid error mark if you're making use of eslint or typescript

onBeforeRouteLeave((to, from, next) => {
  const answer = window.confirm(
    "Do you really want to leave? you have unsaved changes!"
  );

  if (!answer) return false;
  // return false cancel the route change
  next()
});