vue 刷新二维码防止使用缓存数据的解决办法

最新推荐文章于 2024-08-21 16:39:35 发布

一抹惜鱼

最新推荐文章于 2024-08-21 16:39:35 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/nimei31/article/details/90896885

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在Vue项目中解决二维码图片缓存导致显示不更新的问题。通过在URL中添加随机数参数的方式，确保每次请求都能获取到最新的二维码图片，避免了浏览器缓存造成的显示延迟。

前两天做个刷新二维码的东西，发现url用的是缓存数据，即使url调用的二维码图片内容已经变化，但是vue这边还是用的缓存，必须手动刷新，用下面的方法解决：

data() {
      return {
        qrcode_url:"/api/qr_code",    //我的页面使用这个地址变量
      }
    },
    methods: {
      refresh_qr_code() {
          api.smsRefresh().then(res => {    //点击刷新按钮调用这个接口，后端做了一些数据的处理
            setTimeout(function(){
                  var num = Math.ceil(Math.random()*100)    // new一个随机数字
                  this.qrcode_url = '/api/qr_code?key=' + num    // 在原来的url里面通过url参数的形式加上这个数字
                  document.getElementById('qrCode').src=this.qrcode_url    // 把二维码的那个标签的src重新设置，如果url完全一样会使用缓存
            },500)
          })
      }
    }

如果url完全一样会使用缓存这就是为啥我局部刷新了，为啥前端还是旧的二维码的原因