Vue.js组件中如何实现右滑跳转时向querystring传参

你当前无参跳转recipe.html的逻辑可正常运行，带参跳转失效可按以下顺序逐一排查：

• 变量作用域不匹配 #

  右滑回调运行在滑动组件的事件钩子中，若idMeal不在当前回调可访问的作用域内，会拿到undefined，轻则拼接出异常URL，重则触发JS报错中断后续逻辑。
  排查时可在取值后加打印语句确认：

  console.log('取到的meal id为：', targetMealId)
  

  如果打印值为undefined，就是取值链路出了问题。
  正确做法是在渲染每张卡片时，将对应卡片的meal id绑定到卡片DOM实例上，回调触发时直接从当前卡片实例取值，避免全局变量被其他卡片覆盖：

  // 渲染卡片时，绑定当前条目的id到DOM自定义属性
  cardDom.dataset.mealId = 遍历得到的当前条目idMeal值
  

  右滑回调中调整后的逻辑：

  if (!approved) {
    position.x = -x;
    position.rotation = -maxRotation;
    icon.type = 'pass';
  }else{                      
    // 从当前滑动的卡片实例上取绑定的id
    const targetMealId = this.el.dataset.mealId
    // 对特殊字符做编码，避免URL解析异常
    const targetUrl = `recipe.html?recipeid=${encodeURIComponent(targetMealId)}`
    // 与卡片隐藏逻辑的延迟时间对齐，等滑动动画结束后再跳转
    setTimeout(() => {
      window.location.href = targetUrl
    }, 200)
  }
  

• 语法使用错误 #

  你尝试的写法window.location.href = "recipe.html?recipeid="+{{ idMeal }}存在语法问题：{{ }}是前端框架的模板渲染语法，不能直接写在原生JS逻辑代码块中，运行时会直接抛出语法错误，导致整个回调逻辑中断，跳转无法生效。

• 跳转时机被组件逻辑打断 #

  多数滑动卡片组件会在滑动判定完成后执行200ms左右的隐藏动画，如果在动画执行过程中直接触发跳转，可能被组件的重绘、状态重置逻辑打断。将跳转逻辑与现有卡片隐藏的延迟逻辑对齐，即可规避这类问题。

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