Nuxt.js中如何使用路由守卫实现页面离开时触发API请求

数据老陈

2026-10-1

方案失效原因

beforeRouteUpdate 钩子仅在同组件复用时的路由更新场景触发，比如路由仅修改参数、组件实例不销毁的情况，你从/cart跳转到根路径时cart页面组件直接销毁，不会触发该钩子。
监听$route的逻辑仅在组件实例存活时生效，离开页面时组件已进入销毁流程，无法捕获到路由变化。

正确实现方式

你需要使用beforeRouteLeave路由守卫，该钩子会在离开当前路由对应的组件前触发，完全符合跳转页面时触发逻辑的需求。

Nuxt2/选项式API写法

<template>
  <div>
      <!-- 页面业务代码 -->
  </div>
</template>

<script>
export default {
  beforeRouteLeave(to, from, next) {
    // 此处写入你要执行的逻辑，包括API请求
    console.log('即将离开cart页面')
    // 必须调用next()才会继续执行路由跳转
    next()

    // 如果需要等异步API请求结束再跳转，可改为异步写法：
    // async beforeRouteLeave(to, from, next) {
    //   await 你的API请求方法()
    //   next()
    // }
  },
}
</script>

Nuxt3/组合式API写法

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

onBeforeRouteLeave((to, from) => {
  // 执行你的逻辑
  console.log('即将离开cart页面')
  // 异步场景直接返回Promise即可：
  // return 你的API请求方法()
})
</script>