vue单页面多路由缓存问题，解决多路由前进刷新，后退不刷新问题

同一组件被多次复用，有时需要缓存页面数据有时不需要缓存页面数据，最初想到的方法是利用   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]
    },