vue 分页查询条件的缓存

最新推荐文章于 2026-05-12 07:46:24 发布

原创最新推荐文章于 2026-05-12 07:46:24 发布 · 1.6k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

router

在Vue.js项目中，当用户从详情页返回带有查询条件的首页时，如何实现查询条件的缓存，并在跳转其他页面时清除缓存。本文提供了一种详细代码实现，确保在系统菜单切换时正确管理缓存。

在项目中经常遇到这种情况, 首页为常见的查询条件下的表格, 可跳转详情页

从详情页返回首页时, 需缓存用户上一次的查询条件
若是跳转其他页面, 则不缓存查询条件, 且清空缓存

在这里插入图片描述
以下是详细的代码实现：

<!-- 查询条件 -->
 <el-form ref="searchForm" left :model="searchForm" label-position="right" label-width="90px" :inline="true">
    ...
 </el-form>
 
 <el-button type="primary" @click="getList(1)">查 询</el-button>
 <el-button @click="resetSearchForm">重 置</el-button>

<!-- 表格数据展示 -->
 <el-table border :data="tableData" class="el_table">
     ...
    <el-table-column label="操作" width="120">
      <template slot-scope="{row}">
        <el-button type="text" @click.stop="toDetail(row)">查看</el-button>
      </template>
    </el-table-column>
 </el-table>
 
 <!-- 分页: isShowPage用于解决缓存时页码不更新问题 -->
 <el-pagination v-if="isShowPage" ... />

import { sGet, sSet, sRemove } from '@/utils/storage' // 系统封装的sessionStorage存,取,删方法

export default {
	data () {
	  return {
	    searchForm: {
           ..., // 查询的参数
           pageNum: 1,
           pageSize: 10
	    },
	    isShowPage: true // 解决页码更新问题
	  }
	},
	mounted () {
	   this.getCache() // 获取缓存的查询条件
	},
	methods: {
	   getCache () {
	     this.isShowPage = false
	     this.$nextTick(_ => { this.isShowPage = true }) // 页码更新
	     this.searchForm = sGet('searchList_cache') ?? this.searchForm // 赋值给查询表单
	     sRemove('searchList_cache') // 取值后清除
	   },
	   // 跳转详情
      toDetail (row) {
        this.$router.push(...)
        sSet('searchList_cache', this.searchForm) // 查询条件缓存至sessionStorage
      }
	}
}

! 最后还需要注意, 在系统的菜单切换方法里清除该缓存

  // 菜单改变时清除各版块分页查询的条件缓存
  menuChange (url) {
    url !== this.$route.path && sRemove('searchList_cache')
  }

标签

#vue.js #缓存 #javascript