vue增加页面缓存即返回上一页时回到原来的浏览位置附带（清除缓存）

vue在进入新页面时会销毁原来的页面，因此用keep-alive增加缓存，不让刷新，具体操作为：

1.在App.vue中加入：

<template>
  <div id="app">
    <!--<router-view/>-->
    <!--页面返回不刷新-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

2.在index.js页面加入：

routers:[
  {
  path: '/',
  name: 'index',
  component: index,
  meta: {
    keepAlive: true
  }
},
]

此时在index.vue中，mounted方法只发生一次，在浏览器上实现了返回原来滚动位置。在移动端，解决办法为：

       //在页面离开时记录滚动位置
  beforeRouteLeave(to, from, next) {
        this.scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
        document.documentElement.scrollTop || document.body.scrollTop
      next()
    }
  },

    //进入该页面时，用之前保存的滚动位置赋值
  beforeRouteEnter(to, from, next) {
      next(vm => {
        document.body.scrollTop = vm.scrollTop
      })
      next()
  },

okk！完美实现

那清除缓存呢只需要：

  //清除缓存
  beforeRouteLeave(to, from, next) {
    if(to.path=='/index'){
      this.$vnode.parent.componentInstance.cache = {}
      this.$vnode.parent.componentInstance.keys = []
      next()
    }
  },