时间戳

首页 > 解决方案 > VueJS 路由器 $routes.push 无法推送查询参数

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

问题描述

为什么这不起作用？

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了，什么都不会发生...

标签： vue.jsvue-router

解决方案

您需要assign使用route.

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

还有一个建议——

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

而是克隆它-

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

推荐阅读