vue 详情页改变某条数据状态返回主页面后修改主页该条数据状态

应用场景：主要是移动端(uniapp的微信小程序同样适用)，用户列表页上滑到某个位置之后，点击列表的某条数据进去到详情页面，然后做了修改状态的操作，这时候返回到列表页面的时候，对应的数据应该已经被改变。数据不多的情况下可以不用分页直接重新请求全部数据，数据太多的话应该将该条列表id记录下来或者从详情起返回回来然后直接在页面修改该条数据不要去后台分页请求数据。否则如何分页的话，那么原先因为上滑已经加载了一百条数据 ，现在分页查询只回来三十条的话，会发现滚动条只是滚动到了最下面，因为没有足够的数据支撑滚动条滚动到原先的位置。（如果是pc端，每次页面上展示都是十几二十条数据的话，可以直接请求后台刷新页面数据）PS：如果是在详情页执行删除的话，需要在点击的时候保存该条数据index，然后列表页接受到通知的时候在页面上删掉该条数据同时当场打死产品经理。

1、app.vue
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>

2、详情页
<a-button type="link" @click="goBack">返回上一级</a-button>
<script>
	methods: {
		goBack () {
      		window.history.back()
   	    }
    }
</script>

3、main.js
import Vue from 'vue'
Vue.prototype.$EventBus = new Vue()

4、详情页请求后台成功后通知给列表页
this.$EventBus.$emit('change-status')

5、
// 这里销毁页面之前一定要把监听移除，
// 我在这里移除了所有监听，这里参考了[https://zhuanlan.zhihu.com/p/72777951](https://zhuanlan.zhihu.com/p/72777951)
beforeDestroy () {
    this.$EventBus.$off()
  },
  mounted () {
    this.$EventBus.$on('change-status', () => {
      // 在这里刷新列表
      this.$refs.table.refresh(true)
    })
  },

原文链接：https://blog.csdn.net/weixin_46513664/article/details/112303370