Vue中如何跳转至同一路由带查询参数的地址并解决栈溢出问题

你遇到的栈溢出是无限递归触发路由钩子导致的：beforeRouteLeave 只要路由跳转目标的路径匹配当前组件对应的路由规则就会执行，你原始代码的判断条件只校验了to.path === '/place-ad'，调用next('/place-ad?ad_id=12345')重定向后，目标路由的path依然是/place-ad，会再次触发当前钩子进入if分支，循环调用next最终栈溢出。

修改判断为to.path !== '/place-ad'后逻辑不生效，是因为浏览器返回的目标路由正好是/place-ad，判断不成立直接进入else分支放行，不会执行重定向逻辑。

你需要在判断条件里额外校验目标路由是否已经携带ad_id参数，只有当目标是/place-ad且未携带参数时才触发重定向，避免循环：

beforeRouteLeave (to, from, next) {
    if (to.path === '/place-ad' && !to.query.ad_id) {
      console.log("path is /place-ad, add ad_id parameter")
      next({
        path: '/place-ad',
        query: { ad_id: 12345 }
      })
    } else {
      console.log("skip redirect")
      next()
    }
}

说明：使用对象形式传递路由参数比字符串拼接更规范，可自动处理参数转义问题，适配多参数场景。

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