背景

• 列表拥有二级、三级子页面时，有条件查询存在的情况下，返回往往不尽如人意，如果通过本地存储就需要每次记住上一次的查询操作，而且只要复制给其他人，条件就会不复存在，所以最简单直接的方式就是将查询条件放在url上面

技术概览

• router（路由）push方法

const path = this.$route.path; // 路由
const params = { t: new Date().getTime(), page: this.page, limit: this.limit }; // 条件对象
this.$router.push({ path: path, query: params });

数据处理（t、limit、page）

• 1、初始化

// 初始化处理数据 （http://192.168.18.235:9062/flyData/record?p=1&l=20&tp=10&q=%E6%AD%A6%E6%B1%89）

handleInit () {
    let params = O.getQueryJson(window.location.search); // 处理url上参数
    this.page = params && params.p ? params.p * 1 : this.page;
    this.limit = params && params.l ? params.l * 1 : this.limit;
    this.keyword = params && params.q ? params.q : this.keyword; // 关键字
    this.type = params && params.tp ? params.tp : this.type; // select

    let data = { "page": this.page, "limit": this.limit, "keyword": decodeURI(this.keyword), "type_id": this.type }; // decodeURI 中文解码
    this.initList(data);
    this.keyword = decodeURI(this.keyword); // 同步 input vlaue值，否则显示 %E6%AD%A6%E6%B1%89
},
initList (data) {
    this.$api.Track.getPlaneTrackList(data).then((response) => {
      if (response.status >= 200 && response.status < 300) {
        let res = response.data;
        if (res.status === 1) {
         // 。。。
        } else {
         // 。。。
        }
      }
    });
}

• 2、点击分页

pageSizeCurrentChange (val) {
    let params = O.getQueryJson(window.location.search);
    let data = {};
    data.p = this.page = val;
    data.l = params && params.l ? params.l * 1 : this.limit;

    // 条件查询相关的参数：1、获取当前的条件；2、通过路由replace方法替换当前url
    if (this.type !== "") data.tp = this.type;
    if (this.keyword !== "") data.q = decodeURI(this.keyword);

    this.pageQueryAndUpdateUrl(data);
}

• 3、条件查询

handleQueryList () {
    let params = O.getQueryJson(window.location.search);
    let data = {};
    data.p = this.page = 1; // 点击查询，page始终为1
    data.l = params && params.l ? params.l * 1 : this.limit;

    // 条件查询相关的参数：1、获取当前的条件；2、通过路由replace方法替换当前url
    if (this.type !== "") data.tp = this.type;
    if (this.keyword !== "") data.q = decodeURI(this.keyword);

    this.pageQueryAndUpdateUrl(data);
},

• 4、路由更新处理

pageQueryAndUpdateUrl (params) {
  // 路由刷新，会重新再走一遍vue的生命周期（条件初始化，不需要再重新调取初始化函数），但浏览器并没有实质性刷新
  const path = this.$route.path;
  this.$router.replace({ path: path, query: params });
}

注：

• 初始化统一设置需要传入后端的参数，其余均为自定义的url上参数
• url上面中文编解码问题 decodeURI
• 条件查询独立处理，有就往url上面加，没有就不加