vue使用keep-alive 页面缓存记录位置

1.结合meta使用Keep-alive

<div id="app">
    <keep-alive>
      <router-view :includd="[]">
        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
      </router-view>
    </keep-alive>
</div>

2.页面中使用

beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      if (from.path !== '/courseDetail') { // 一定是从A进到B页面才刷新
        重新初始化赋值
      } else {
        vm.setTop() // 从缓存中取
      }
    })
  }

// 补充记录的位置方法
1.滚动的div容器

  <div class="container" @scroll="handleScroll" ref="top" />

2.记录滚动位置

 handleScroll (e) {
   const { scrollTop } = e.target
   this.$route.meta.top = scrollTop
 }

3.设置滚动的位置

 setTop () {
      this.$refs.top.scrollTop = this.$route.meta.top
   }

方法二： vue版本：2.6.11

 meta: {keep-alive:true} 
 <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> 
 <router-view v-if="!$route.meta.keepAlive" />