VueJS 路由器 $routes.push 无法推送查询参数

Question

为什么这不起作用？

selectChanged(val) {

        let term_ids = [];
        let taxonomy = '';

        val.forEach((obj) => {
          term_ids.push(obj.term_id);
          taxonomy = obj.taxonomy;
        });

        let obj = this.$route.query;
        obj[taxonomy] = term_ids.join(',');

        this.$router.push({
          query: obj,
        });

      },

obj 看起来像这样：

{education_levels: "33,36", candidate_countries: "304"}

如果我对上面的对象进行硬编码，它将按预期工作，VueJS 路由器将推送查询字符串，它看起来像这样：?education_levels=33,36&candidate_countries=304

但是如果我通过query: obj 什么都不会发生...

Answer 1

你需要assignroute的所有属性。

Object.Assign 复制 $route 的新副本，包括所有可枚举的 OWN 属性

还有一个建议 -

当您执行此操作时，let obj = this.$route.query; -
Objects 被存储到 memory，因此当您尝试复制 object 时，您实际上是在复制 object 的 address记忆。 所以当你这样做时 - obj[taxonomy] = term_ids.join(','); 你会不小心改变原始值，所以需要克隆

而是克隆它-

let obj = { ... this.$route.query }
this.$router.push({
   query: Object.assign({}, this.$route.query, obj),
});