vue 分页 修改数据后 重新查询全部数据 当前页面不变 但分页的页码高亮调到第一页 怎么解决修改数据后 重新查询全部数据 页面不变的情况下 页码高亮也不改变

在Vue中处理修改数据后重新加载整个列表并保持当前页不变的问题时，通常需要结合Vuex或`keep-alive`特性以及事件总线来进行操作。以下是解决步骤：

1. **Vuex**: 如果你使用Vuex管理状态，可以先将当前页数的状态保存下来，当数据更新后，在新的请求完成时，再从存储中恢复页数。

// 在mutation里保存页数
state: {
  currentPage: null,
  // 其他状态...
},
mutations: {
  updateData(state, newData) {
    state.data = newData;
    if (state.currentPage !== null) { // 检查是否有保存的页数
      state.currentPage = state.savedCurrentPage; // 从Vuex中恢复
      Vue.nextTick(() => { // 等待DOM渲染完成后更新页码高亮
        this.highlightFirstPage(); // 自定义函数处理高亮
      });
    }
  },
  saveCurrentPage(state, currentPage) {
    state.savedCurrentPage = currentPage;
  }
}

2. **`keep-alive`** (仅适用于非SPA应用): 对于路由相关的场景，你可以使用`<router-view>`的`keep-alive`属性来缓存当前视图，然后在数据刷新后，通过`activated`生命周期钩子恢复页面状态。

<router-view :key="route.fullPath" keep-alive></router-view>

3. **事件总线** (如果项目结构复杂): 可以创建一个全局事件总线，当数据更新时发布事件，接收者是负责更新UI的组件。在组件接收到这个事件后，更新数据并在适当的时候调整页码高亮。

// 定义一个全局事件总线
const eventBus = new Vue();

// 触发数据更新
eventBus.$emit('updateData', newData);

// 组件监听更新数据事件
export default {
  created() {
    eventBus.$on('updateData', () => {
      highlightFirstPage();
    });
  },
  methods: {
    highlightFirstPage() {
      // 更新页码高亮逻辑
    }
  }
};