Vue实现搜索后地址栏路径改变，刷新界面不改变页面内容功能

1、功能演示

2、具体操作

输入搜索值

点击搜索

刷新界面之后

3、实现代码

首先看一下后端接口

这是我获取列表数据的代码，新增带加号这几行

private getTable(page: number, rows: number): void {
    let params: any = { page, rows };
    + if(this.$route.query.unit) {
    +   params.unit = this.$route.query.unit || '';
    + };
    Object.keys(this.form).forEach((k: string) => (this.form[k] ? (params[k] = this.form[k]) : ''));
    this.setLoading(true);
    deployList(params).then((res: any) => {
      const { code, data } = res;
      if (code === 1) {
        this.pageTotal = data.cnt || 0;
        this.tableData = data.data || [];
        this.tableData.forEach((v: any) => {
          v.commit_id = v.commit_id.slice(0,8);
        });
      };
    });
  }

搜索列表代码

private searchTable(): void {
    this.currenPage = 1;
    this.pageSize = 8;
    if(this.form.unit) {
      if(this.$route.query.unit) {
        if(this.form.unit == this.$route.query.unit) {
          this.getTable(this.currenPage, this.pageSize);
          return;
        }
      }
      this.$router.replace('/pcd/deploy' + '?unit=' + this.form.unit)
    } else {
      if(!this.form.unit && !this.$route.query.unit) {
        this.getTable(this.currenPage, this.pageSize);
        return;
      }
      this.$router.replace('/pcd/deploy');
    }
    this.getTable(this.currenPage, this.pageSize);
  }

4、实现原理

因为两个页面实现原理都是一样的，所以这里直接说想法。通过this.$route中的query来存储unit的值（后端接口要实现搜索功能），在搜索的时候把搜索框内的值赋值到this.$route.query.unit上，刷新界面是，判断this.$route.query.unit是否存在，如果存在直接按照unit的值进行模糊搜索，这里要注意如果路径上也就是this.$route.query.unit的值存在并且你搜索框输入的值与其相同，会导致路径重复报错Navigating to current location，因此这时要在点击搜索的时候进一步判断。

测试的是时候还遇到一些bug，比如搜索的值为空的时候，页面不跳转；搜索值相同的时候，页面显示全部数据；搜索值为空，点击第一次搜索，页面数据不变，再点击一次才出现全部数据等等，可以看一下上面最后改的代码逻辑，本人测现在是没有任何的bug了。