实现接口参数为空时不传参，刷新页面时参数重置问题

如图，我们在Vue项目里面调用接口，如果此时用户进行了筛选且刷新页面时，Vue项目该页面默认的参数会重置为初始状态。
Vue页面默认值：

data() {
    return {
      type: "",
      value: "",
      buildTitle: "",
      haveSelect: false,
      list: [],
      roleList: [],
      pageInfo: null,
      info: {
        keyword_name: "",
        type: "",
        keyword_phone: "",
        keyword_email: "",
        role_id: "",
        status: "",
        page: 1,
        per_page: 15,
      },
    };
  },

1.我们可以用路由携带参数的方式跳转这个页面,for···in循环这个对象，将没有进行筛选的参数在路由携带参数中去除掉。

for (let key in this.info) {
        if (!this.info[key]) {
          delete this.info[key];
        }
      }
 this.$router.push({ path: "/system/permission", query: this.info });

2.进行路由监听，将要传的参数在原对象中去掉

watch: {
    $route: {
      handler(val, oldVal) {
          Object.assign(this.info, val.query);
        }
        this.getList(); //监听路由重新调用接口
      },
      immediate: true,
      deep: true,
    },
  },
//调接口时可for···in循环对象去掉不必要的搜索条件