如何在Nuxt的组合式API中使用onBeforeRouteLeave？

在Nuxt 3的组合式API（<script setup>）中，你可以直接从vue-router导入onBeforeRouteLeave钩子，用于监听路由离开事件，以下是具体示例：

<script setup>
import { onBeforeRouteLeave } from 'vue-router'

// 注册路由离开钩子
onBeforeRouteLeave((to, from, next) => {
  // 示例：弹出确认框，询问用户是否离开
  const confirmLeave = confirm('当前页面有未保存内容，确定要离开吗？')
  
  if (confirmLeave) {
    // 允许路由跳转
    next()
  } else {
    // 阻止路由跳转，停留在当前页面
    next(false)
  }
})
</script>

<template>
  <div>
    <h2>测试页面</h2>
    <p>尝试点击导航跳转到其他页面，会触发离开确认</p>
  </div>
</template>

钩子参数说明 #

• to：即将前往的目标路由对象，包含目标路径、参数等信息
• from：当前要离开的路由对象
• next：路由控制函数，有三种用法：
  • next()：允许执行路由跳转
  • next(false)：阻止路由跳转，停留在当前页面
  • next('/target-path')：强制跳转到指定路径，代替原本的跳转目标

如果是使用Nuxt 2的组合式API，需要先安装@nuxtjs/composition-api依赖，导入和使用方式与Nuxt 3一致，只需确保在nuxt.config.js中启用该模块。

内容的提问来源于stack exchange，提问作者Ali Mardini