刷新页面，记住页面内的列表查询参数——vue3实现

需求

页面中包含数据列表查询功能时，刷新页面时保持查询参数是比较常见的需求

方案

可将查询参数置于组件的路由参数中，也可以通过本地存储实现

Demo

以下，基于 vue3 & element-plus ，使用路由参数保存列表查询参数，实现刷新页面，查询条件不变

创建组件后，根据路由参数初始化查询参数
查询参数改变时，更新路由参数

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getDataList } from '@/api/demo'

const $route = useRoute(), $router = useRouter()

const { query } = $route
const filterItems = reactive({ // 查询参数
  sort: query.sort??'desc', // 默认值 desc
  type: query.type,
  search: query.search
})

onMounted(() => {
  getDatas()
})
// 查询数据列表
function getDatas() {
  getDataList(getQueryParams()).then(res => {
    datas = res.data
  })
}
// 获取查询参数
function getQueryParams() {
  let params = {}
  for(let k in filterItems) {
    if(filterItems[k]) params[k] = filterItems[k]
  }
  return params
}
// 表单查询
function queryHandler() {
  replaceRouter()
  getPagedData()
}
// 更新路由参数
function replaceRouter() {
  $router.replace({ query: getQueryParams() })
}
</script>

<template>
  <!-- 查询表单 -->
  <el-form :inline="true" :model="filterItems">
    <el-form-item label="Sort By: ">
      <el-select v-model="filterItems.sort" @change="queryHandler()"></el-select>
    </el-form-item>
    <el-form-item label="Type: ">
      <el-select v-model="filterItems.type" @change="queryHandler()"></el-select>
    </el-form-item>
    <el-form-item label="Search: ">
      <el-input v-model="filterItems.search" @keyup.enter="queryHandler()"/>
    </el-form-item>
    <el-form-item>
      <el-button @click="queryHandler()">查询</el-button>
    </el-form-item>
  </el-form>
  <!-- 数据列表 -->
  <el-table :data="datas"></el-table>
</template>