vue3搜索完后点击分页的下一页怎么依然保持搜索状态

在Vue 3中，可以通过使用reactive或ref来保持搜索状态。以下是一个示例：

// 在组件的setup函数中
import { reactive, ref } from 'vue';

export default {
  setup() {
    // 创建一个响应式的搜索对象
    const search = reactive({
      keyword: ''
    });

    // 创建一个ref来存储当前页码
    const currentPage = ref(1);

    // 处理搜索事件
    const handleSearch = () => {
      // 执行搜索逻辑
      // ...
      // 每次搜索都将当前页码重置为1
      currentPage.value = 1;
    };

    // 处理分页事件
    const handlePageChange = (page) => {
      // 更新当前页码
      currentPage.value = page;
      // 执行搜索逻辑
      // ...
    };

    return {
      search,
      currentPage,
      handleSearch,
      handlePageChange
    };
  }
}

然后在模板中使用搜索和分页逻辑：

<template>
  <div>
    <input v-model="search.keyword" type="text" />
    <button @click="handleSearch">搜索</button>

    <!-- 显示搜索结果 -->
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>
    </ul>

    <!-- 显示分页 -->
    <button v-for="page in totalPages" :key="page" @click="handlePageChange(page)">
      {{ page }}
    </button>
  </div>
</template>

在上述示例中，每次点击搜索按钮时，会将currentPage重置为1，这样在分页组件中就可以使用currentPage来显示当前页码，并且在点击下一页时仍然保持搜索状态