Vue.js 将变量传递到vuejs组件内的查询字符串

我有一个脚本，我用它来创建类似火药的刷卡。这一切都很好，除了一件事——我需要传递一个带有变量的查询字符串，这样当用户向右滑动时，它们会被带到另一个页面。在这段代码中，如果URL是简单的，我可以这样做：

if (!approved) {
                position.x = -x;
                position.rotation = -maxRotation;
                icon.type = 'pass';
            }else{                      
                window.location.href = "recipe.html"
            }

            icon.opacity = 1;
            setTimeout(() => this.showing = false, 200);
        }
    },

（完整代码位于上面的Codepen链接上）

但是如果我尝试将变量传递给查询字符串，它将不起作用。我试过：

window.location.href = "recipe.html?recipeid="+idMeal;

及

甚至

window.location.href = "recipe.html?recipeid="+`${idMeal}`;

但我不能让它工作。如果您有任何想法，我们将不胜感激。

您应该使用

router.push({ path: 'swipe', query: { plan: 'beauty lady' } })

记录在这里

它不起作用不是一个有用的问题描述。

router.push({ path: 'swipe', query: { plan: 'beauty lady' } })