Vue3项目：编辑页返回列表页，数据更新失效的解决方案
在Vue3开发中，从列表页跳转到编辑页修改数据后，返回列表页数据未更新的情况很常见。本文以角色管理系统为例，分析问题并提供解决方法。
场景：角色列表页和编辑页。在列表页获取角色数据后，点击编辑按钮跳转到编辑页修改。修改完成后，点击确定按钮返回列表页，但列表数据未刷新，仍然显示旧数据。 网络请求显示，返回列表页后，getTableList接口未被再次调用，onMounted钩子函数也没有重新执行。
问题根源：Vue组件缓存机制
立即学习“前端免费学习笔记（深入）”；
从编辑页返回列表页时，Vue框架默认缓存列表组件，导致onMounted钩子函数仅执行一次。组件不会重新渲染，数据自然不会更新。
解决方案：
-
利用路由组件的
key属性或移除缓存:router-view组件缓存导致列表组件不被重新创建。为router-view添加动态key属性强制Vue重新渲染组件：$route.fullPath会随着路由变化而改变。 另一种方法是检查项目中是否使用了keep-alive组件，如果使用了，尝试移除或更精确地控制缓存策略。 -
使用
onActivated生命周期钩子:onMounted只在组件挂载时执行一次，而onActivated在组件激活时执行。在列表页组件中，用onActivated代替onMounted获取列表数据，确保每次组件激活都重新获取数据，解决数据不更新问题。即使组件被缓存，页面重新激活时，onActivated也会触发数据重新加载。
选择哪种方法取决于项目的具体情况和缓存策略。 如果keep-alive的使用比较复杂，修改key属性可能更简单直接。 如果需要更精细的控制，则onActivated是更好的选择。
