vue页面缓存方案

一、简易版

功能：仅需缓存页面数据、页面滑动位置

解决方案：keepAlive+scrollTop（页面滚动条位置）+beforeRouteEnter()

代码示例：

//路由配置
   meta: {
      mode: "",
      title: "",
      keepAlive: true,
    },

//获取滚动位置（在页面即将跳走时执行）
  1.获取滚动元素
   let dom = this.$el.querySelector(".元素类名")
  2.获取滚动元素位置
   this.navScrollTop = dom.scrollTop

//beforeRouteEnter()路由守卫中执行回滚操作（定位至上一次离开时页面滑动的位置）

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path !== "/cuisinedetail") {
         //非需要回滚操作页面进入，执行页面初始化操作（刷新表单、重置参数等等....）

      } else {
        vm.$nextTick(() => {
          //执行页面回滚操作
          var navScrollTop = vm.$el.querySelector(".元素类名");

          //navScrollTop数据因为页面存在缓存，所以页面跳转也不会刷新
          navScrollTop.scrollTop = vm.navScrollTop;
        });
      }
    });
  },