keepalive 跳转到某个页面缓存否则不缓存缓存浏览的位置

export const KeepaliveListMixin = {
/**
 *   两个路由守卫  实现 从详情返回到列表 列表页面缓存  否则就不缓存
 */
beforeRouteEnter (to, from, next) {
  to.meta.keepAlive = true;
  next()
},
beforeRouteLeave (to, from, next) {
  if (to.name == "DetailStore") { //这里的路径是要跳转的需要缓存的路径
    from.meta.keepAlive = true;
  } else {
    let Vnode = this.$vnode;
    let parentVnode = Vnode && Vnode.parent;
    if (parentVnode && parentVnode.componentInstance && parentVnode.componentInstance.cache) {
      var key = Vnode.key == null ? Vnode.componentOptions.Ctor.cid + (Vnode.componentOptions.tag ? `::${Vnode.componentOptions.tag}` : '') : Vnode.key;
      var cache = parentVnode.componentInstance.cache;
      var keys = parentVnode.componentInstance.keys;
      if (cache[key]) {
        this.$destroy();
        if (keys.length) {
          var index = keys.indexOf(key);
          if (index > -1) {
            keys.splice(index, 1);
          }
        }
        cache[key] = null;
      }
    }
  }
//记录离开时的位置 start
  //let position = document.documentElement.scrollTop || document.body.scrollTop
  //from.meta.savedPosition = position
//记录离开时的位置 end
  next();
  },
}

　封装到KeepaliveListMixin.js里面然后在你需要缓存的页面里面引入；

import { KeepaliveListMixin } from '@/mixins/KeepaliveListMixin'

mixins: [KeepaliveListMixin],

缓存浏览的位置要配合在router.js 配入以下代码

const scrollBehavior = function scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition;
  }else {
      return { x: 0, y: 0 }
   }
//需要返回一个promise 否则滚动条的位置 和滚动条的值不一样
//return new Promise((resolve) => {
    //setTimeout(() => {
     // if (savedPosition ) {
        //return savedPosition
     // }else {
      //  return { x: 0, y: 0 }
     // }
    //},0)
 // })
};
const router = new Router({
  routes,
  scrollBehavior,
});

以上就能实现 keepalive 跳转到详情页面返回的时候能缓存且记录浏览的位置；从其他页面进入该页面就不会缓存

有个问题：就是记录浏览位置的时候滚动条在偏上面没啥问题；当你把滚动条拉到中下位置的时候返回上一页的时候滚动条会从原来的位置刷一下到了底部；具体还未找到问题的原因；有知道的大佬可以评论区留言交流！！！！

尝试过用localstorage 记录位置；配合 scrollBehavior 还是存在问题；在

1	`if` `(savedPosition) {console.lo("上次滚动的位置"+savedPosition)` `// 这个值是上次的位置值没错，就是不知道为什么会突然刷一下到达底部，关键问题是滚动条在靠近顶部的时候是正常的；return savedPosition; }else { return { x: 0, y: 0 } }`