vue缓存的keepalive页面刷新数据的方法

用到这个的业务场景是这样的： a页面点击新建列表按钮进入到新建的页面b，填写b页面并点击b页面确认添加按钮，把这些数据带到a页面，填充到列表（数组），可以添加多条， 点击这条的时候进入到编辑页面，确认修改之后，回退到a页面，a页面需要更新这条数据 实现这个功能的时候，由于是路由页面之间的跳转，首先想到的方案有几个：1. 用sessionStorage本地存储；2. 用路由参数带过去；3. 用兄弟组件传值 由于是添加完之后如果按回退是需要退出整个页面，如果用路由跳转，会出现回退到编辑页面了，所以这个方法首先排除 用本地存储的时候，如果不加回退也会吧之前存的历史记录给带过来，所以最终选用了第三种方 在Vue开发过程中，有时我们需要对特定页面进行缓存，以便在用户离开后再返回时能保持之前的页面状态。Vue的`keep-alive`组件就是用来实现这一功能的。在这个场景中，我们有一个A页面，用户可以通过它进入B页面来创建新的列表项。在B页面完成编辑后，数据需要被带回A页面并更新列表。由于涉及到页面间的跳转和数据传递，我们需要考虑多种解决方案。 我们可以使用`sessionStorage`来保存数据，但这种方法在用户按下浏览器的回退按钮时，可能会导致之前存储的历史记录也被一并带回来，这不是我们期望的结果。通过路由参数传递数据也是一种常见方法，但在此场景中，由于我们需要在添加完新条目后完全退出编辑页面，而回退操作可能会回到编辑页面，所以这条路也不可行。我们选择了兄弟组件间通信的方式，即通过事件总线（Event Bus）来传递数据，这种方法更为灵活，可以满足我们的需求。 在实现过程中，A页面的路由配置中设置了`meta`属性，指明该页面需要被缓存： ```javascript { path: '/a', name: 'a', component: a, meta: { keepAlive: true } } ``` 同时，在`App.vue`中使用`<keep-alive>`包裹`<router-view>`，确保缓存生效： ```html <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template> ``` 当A页面被缓存时，它不会触发`created`生命周期钩子，而是会触发`activated`。因此，我们需要在`activated`中处理数据接收和重置： ```javascript activated() { let that = this; self.$on('detailShow', (data) => { if (!data.isEdit) { // 新增情况 that.addParams.push(data); that.addParams = Array.from(new Set(that.addParams)); // 去重 } else { // 编辑情况 // 避免直接修改，因页面有缓存，显示的仍是未修改前的 Vue.set(that.addParams, that.editIndex, data); // 使用Vue.set()方法修改数据 } }); } ``` 在B页面提交编辑或新增操作时，通过`$emit`分发事件，并将数据传递给A页面： ```javascript submit() { if (!this.detailValidate()) { // 表单校验，不通过则不提交 return; } else { self.$emit('detailShow', this.addParams); // 事件分发 this.$router.back(); // 返回A页面 } } ``` 总结起来，解决Vue中缓存页面（如`keep-alive`）的数据刷新问题，关键在于利用`activated`生命周期钩子来处理数据接收，并借助`Vue.set()`方法确保对已缓存数组的修改能够正确反映在视图上。同时，通过自定义事件进行组件间通信，实现了页面跳转时的数据传递。在选择数据传递方式时，应根据具体业务需求和场景来判断，确保数据的正确性和用户体验。