解决vue切换路由页面刷新但数据不更新的bug
今天做项目自己给自己测试,发现当我们在不同的网页使用同一份数据的时候,由于使用<keep-alive>
组件,数据被自动缓存了,所以导致点击下一个相关页面的时候虽然页面刷新了但是后台数据没有刷新的问题。
问题
如下图所示,由地址栏可知,左边的数据是从另一个页面跳转而来,获取的是传了指定的 id 所得来数据,当我们点击左侧标签想获取全部数据的时候页面虽然刷新了但是数据依然是上个页面的。
解决方案
我们需要使用watch
侦听器侦听路由的变化,监测到变化后使页面重新向后台发送请求获取数据。
注意:向后台重新发送数据时要把从上个页面带的指定 id 的参数去掉才可以拿到新的数据。
解决方案如以下代码:
watch: { $route (to, from) { console.log(to, from) this.渲染数据的函数() } },
我们需要用浅拷贝的数据向后台发送请求,否则获取的还是带 id 发送后返回的数据,数据还是不会更新,因为 data 的数据已经被更改了:
let res = {} if (this.$route.query.id) { //将路由传过来的 id 赋给要传的参数 id xxx.yyy = this.$route.query.id res = await api 接口({...xxx}) } else { res = await api 接口(xxx) }
完成后的理想效果:
以上就是今天我解决的关于 vue 切换路由页面刷新但数据不更新的小 bug,进步从解决一个又一个小 bug 开始。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 解决vue切换路由页面刷新但数据不更新的bug
码云笔记 » 解决vue切换路由页面刷新但数据不更新的bug