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  还是存在问题；  在

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