涉及到单个查询，联合查询，分页等功能。出一个接口，后面坠不同参数，只需要监听url参数的变化，或者本身传递的参数。将url参数的变化，作为查询的条件。

出发点：

1. 通过beforeRouteUpdate，对路由变化进行监控

  beforeRouteUpdate(to, from, next) {
       // 如果路径一样，说明才是进行搜索，或者分页的数据
    if (to.path === from.path) {
       // 对参数对象，进行拷贝
      const newQuery = Object.assign({}, to.query);
      const oldQuery = Object.assign({}, from.query);
      // 如果参数不一样，说明是新的查询条件，请求接口
      if (JSON.stringify(newQuery) !== JSON.stringify(oldQuery)) {
        console.log("路由发生变化");
        this.getList();
      }
    }
    // 不管怎样，都要next放行
    next();
  },

2. 对用户输入地址栏的参数，或者刷新做记录

 created() {
    this.parseQuery();
  },
  
  // 把参数封装成方法，高级！！！
   parseQuery() {
      // 收集查询条件
      // 根据路由的条件
      const query = Object.assign({}, this.$route.query);
      // 现有的条件
      let listQuery = {
        page: 1,
        pageSize: 20,
        sort: "-id",
      };
      console.log("this.$route.query", query);

      if (query) {
        query.page && (query.page = Number(query.page));
        query.pageSize && (query.pageSize = Number(query.pageSize));
        // 最终是现有的条件覆盖路由的条件
        listQuery = {
          ...listQuery,
          ...query,
        };
      }
      this.listQuery = listQuery;
    },

3. 数据请求

 getList() {
      this.listLoading = true;
      listBook(this.listQuery).then((response) => {
        const { data, total } = response;
        this.list = data;
        this.total = total;
        this.listLoading = false;
        console.log("list", this.list);
        this.list.forEach((book) => {
          book.titleWrapper = this.wrapperKeyword("title", book.title);
          book.authorWrapper = this.wrapperKeyword("author", book.author);
        });
      });
    },