在項目中經常遇到這種情況, 首頁為常見的查詢條件下的表格, 可跳轉詳情頁

從詳情頁返回首頁時, 需緩存用戶上一次的查詢條件

若是跳轉其他頁面, 則不緩存查詢條件, 且清空緩存

以下是詳細的代碼實現：

<!-- 查詢條件 --><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 = falsethis.$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 分页查询条件的缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。