Nxut列表页刷新时记住页码，列表分类

时间：2022/12/6，技术Nuxt2，版本2.15.8

 这是我要处理的列表页结构，有分类，有分页，刷新或返回上一页时记住之前选择的类型和页码

刷新时路由是保持不变的，就可以把页码和分类数据存在路由上。

以下代码

结构代码，分类选项卡绑定激活项active ，分页器上绑定页码currentPage，这里用的element分页组件

      <el-pagination background 
                     :current-page="currentPage"
                     layout="prev, pager, next"
                     @current-change="pageChange"
                     :page-size="pagesize"
                     :total="total">
      </el-pagination>

在分类选项卡切换事件，分页切换事件，两个事件方法里，给路由加上我们要记住的数据，也就是当前的分类和页码

this.$router.push({
        query:{
          tabActive: this.active,
          page: this.currentPage
        }
      })

在nuxt提供的请求方法async asyncData里

参数query是从路由中取得的数据，在数据处理中判断路由是否有传来的数据，否则设置默认值

 async asyncData({ $axios,query }) {
    // 其他请求...
    // 请求分类列表
    let [typeRes] = await Promise.all([
      $axios.post(`/api/sysDictionary/getAllData.json`,{
        groupCode:"news"
      })
    ]);
    //  数据处理
    let act = query.tabActive?query.tabActive:typeRes.data.result[0].code
    let pagesize = 3
    let currentPage = query.page?Number(query.page):1
    //  初始请求数据列表
    let [dtList] = await Promise.all([
      $axios.post(`/api/newsCenter/getDataList.json`,{
        currentPage:currentPage,
        size:pagesize,
        query:{type:act}
      })
    ]);
    return {
      typeList:typeRes.data.result,
      active:act,
      pagesize:pagesize,
      newsList:dtList.data.result.rows,
      total:dtList.data.result.total,
      currentPage:currentPage
    };
  },

要注意的点

①分类切换时，应该把页码归重置为1

②监听路由变化刷新页面

watch:{
    $route:{
      handler(val,oldval){
        this.$router.go(0)
      },
      deep: true
    }
  },