同一组件被多次复用,有时需要缓存页面数据有时不需要缓存页面数据,最初想到的方法是利用   keep-alive 来进行页面缓存,经过一番验证发现单纯的用keep-alive是行不通的,原因如下

keep-alive 会对已加载过的路由进行缓存,而我同一个页面多次复用显然使用的都是同一个路由,所以在加载过一次之后,之后不管从哪里点击到该页面都是缓存的第一次的数据,这显然不是我们想要的结果。

还有一个原因是我所有请求数据的方法都在created里,而created只在实例被初次创建的时候才调用,所以缓存页面之后,created便不会再被执行。

说了这么多,那么到底该如何解决此问题呢,其实也很简单啦。

利用watch监听事件,对路由的变化进行监听,以下是我的代码,仅供参考,有问题欢迎留言

watch: {
  
    //监听路由变化
    '$route' (to, from) {

      if(to.name == 'visirank1' || from.name == 'visirank1') {
       //缓存的无需要重新请求数据的
      } else {
        //需要重新请求数据的
      }
      console.log(this.getStatus(this.$route.path))
    }
  },
methods添加此方法
getStatus (urlStr) {
      var urlStrArr = urlStr.split('/')
      return urlStrArr[urlStrArr.length - 1]
    },
Logo

前往低代码交流专区

更多推荐