javascript - 使用 Vue-Router 更改路由返回的数据

Question

我正在尝试将数据对象的查询字符串附加到 URL，然后根据查询从服务器获取一些数据。

通过更改数据添加查询字符串和删除查询字符串有效，我似乎唯一想不通的是如何通过使用 vue-router 返回页面来更改数据。

也许值得一提的是，通过

beforeRouteEnter(to, from, next) {
   this.query = to.query
   next()
}

正在工作，但也会触发设置查询字符串的观察者。

这是我到目前为止所得到的，有人能指出我正确的方向吗？

<template>
  <div>
    <div class="form-group">
      <label for="">String</label>
      <input
        type="text"
        class="form-control"
        v-model="query.string"
        placeholder="string"
      >
    </div>
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input
          class="form-check-input"
          type="checkbox"
          v-model="query.boolean"
        > Boolean
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: {
        string: this.$route.query.string || "",
        array: this.$route.query.array
          ? this.$route.query.array.split(",")
          : [],
        boolean: this.$route.query.boolean || false
      }
    };
  },
  watch: {
    query: {
      deep: true,
      handler(newFilters) {
        const q = this.toQuerystring({
          ...this.query
        });
        const path = `${this.$route.path}?${q}`;
        this.$router.push(path);
      }
    }
  },
  methods: {
    toQuerystring(object, parentNode = null) {
      let query = Object.entries(object)
        .map(item => {
          let key = parentNode ? `${parentNode}[${item[0]}]` : item[0];
          let value = item[1];
          if (Array.isArray(value)) {
            if (value.length > 0) {
              value = value.map(encodeURIComponent);
              return key + "=" + value.join(",");
            } else {
              return "";
            }
          } else if (value instanceof Object) {
            return toQuerystring(value, key);
          } else if (item[1] !== null && item[1] !== "" && item[1] !== false) {
            return [
              Array.isArray(item[0]) ? `${key}` : key,
              encodeURIComponent(item[1])
            ].join("=");
          }
          return "";
        })
        .filter(empty => empty)
        .join("&");
      return "?" + query;
    }
  }
};
</script>

标签： javascriptvue.jsvue-routernuxt.js