Nuxt.js中如何绕过组件beforeRouteLeave守卫直接访问目标页面

核心是给「不需要触发弹窗的跳转行为」添加专属识别标记，在beforeRouteLeave守卫中优先判断标记，命中则直接放行，不执行弹窗逻辑。以下是3种常用实现方案，可根据场景选择：

方案1：URL query传参（通用性最强） #

适合所有场景，标记直接拼接在URL上，兼容Nuxt2/Nuxt3所有版本。

• 需要触发弹窗的普通跳转保持原有写法不变
• 不需要弹窗的跳转，给目标路由追加skipModal=1的query参数
• 守卫中优先判断该参数，命中则直接跳转，可选删除参数避免URL污染

代码示例：

<!-- 普通跳转：会触发弹窗 -->
<NuxtLink :to="{ name: 'read-content', params: { id: postId } }">
  查看内容
</NuxtLink>

<!-- 直接跳转：追加skipModal参数，不触发弹窗 -->
<NuxtLink :to="{ name: 'read-content', params: { id: postId }, query: { skipModal: '1' } }">
  直接进入内容页
</NuxtLink>

修改路由守卫逻辑：

beforeRouteLeave(to, from, next) {
  // 识别到跳过弹窗标记，直接放行
  if (to.query.skipModal === '1') {
    delete to.query.skipModal
    // 移除参数后跳转，避免参数残留到URL
    next({ path: to.path, query: to.query, params: to.params })
    return
  }
  if (to.name === "read-content") {
    this.displayProductModal(to);
  } else {
    next();
  }
},

方案2：路由state传参（URL无感知） #

适合不想把标记暴露在URL上的场景，仅支持Nuxt3/Vue Router4以上版本。
不需要弹窗的跳转通过state字段传私有标记，标记不会出现在URL地址中：

<NuxtLink :to="{ name: 'read-content', params: { id: postId }, state: { skipProductModal: true } }">
  直接进入内容页
</NuxtLink>

对应守卫判断逻辑：

beforeRouteLeave(to, from, next) {
  // 读取history state中的标记
  if (to.state?.skipProductModal) {
    next()
    return
  }
  if (to.name === "read-content") {
    this.displayProductModal(to);
  } else {
    next();
  }
},

方案3：组件内临时标记（适合同组件内编程式跳转） #

如果跳转动作都在当前组件内触发，可以在组件实例上挂一个临时标记变量，跳转前设置标记，守卫判断后重置即可：

data() {
  return {
    // 单次跳转跳过弹窗的标记
    skipModalOnce: false
  }
},
methods: {
  // 绑定到直接跳转按钮的点击事件
  goToContentDirect() {
    this.skipModalOnce = true
    this.$router.push({ name: 'read-content', params: { id: this.postId } })
  }
},
beforeRouteLeave(to, from, next) {
  if (this.skipModalOnce) {
    // 重置标记，避免影响后续其他跳转
    this.skipModalOnce = false
    next()
    return
  }
  if (to.name === "read-content") {
    this.displayProductModal(to);
  } else {
    next();
  }
},

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