搜索清空回退功能以及分页功能

搜索清空回退功能以及分页功能

搜索清空回退功能

在搜索组件中完成此功能

a. 绑定键盘enter事件

@keyup.13 ="iconClick"

b. 在全局储存跳转到搜索页面前的路径backValue,监听input框的值,如果路径为搜索结果页面,且input框有内容,backValue不为空,则路由跳转回原页面

watch:{
    inputValue(val){
       if(this.$route.path === '/noSearchResult' && val === '' && this.backValue !== null){
          this.$router.push(this.backValue);
          return '';
       }else {
          return '';
       }
     }

分页功能

productData为原始数据,currentPage为当前页,slice返回当前页数据,length数组长度绑定组件的总长度

productDataList() {
   let res = this.productData;
   let length =this.productDataLength = this.productData.length;

   let s = (this.currentPage-1)*8;
   let data = res.slice(s,s+8);

   return data;

}