vue+vant2—篇2—使用list组件时，增加缓存

做移动端时，如果需要给用户呈现良好的体验，以下两点时必须的 

① 缓存页面② 保留scrolltop的位置

注：第②点是依赖第①点来实现的

一、使用keep-alive增加缓存

我没在App.vue里面写keep-alive，因为系统的入口在main.vue，下面时main.vue中的内容

注意：下面代码中的css，.main-container 中设置的高度很关键

 配置router，

注意：meta里设置的属性很关键

export default [
  {
    path: '/',
    component: () => import('@/views/main'),
    name: 'main',
    redirect: {
      name: 'transfer' // home //按理说应该为home,但是本系统有单点登录，所以需要一个中转站
    },
    meta: {
      name: "layout"
    },
    children: [
      {
        path: 'resourceMgmt-instModel',
        component: () => import('@/views/modules/resourceMgmt/instModel'),
        name: 'resourceMgmt-instModel',
        meta: {
          title: "标题",
          keepAlive: true,
          scrollTop: 0
        },
      },
      {
        path: 'resourceMgmt-instList',
        component: () => import('@/views/modules/resourceMgmt/instList'),
        name: 'resourceMgmt-instList',
        meta: {
          title: "标题",
          keepAlive: true,
          scrollTop: 0
        },
      },
      {
        path: 'resourceMgmt-instDetails',
        component: () => import('@/views/modules/resourceMgmt/instDetails'),
        name: 'resourceMgmt-instDetails',
      },
      {
        path: 'resourceMgmt-instRelate',
        component: () => import('@/views/modules/resourceMgmt/instRelate'),
        name: 'resourceMgmt-instRelate',
        meta: {
          title: "标题",
          keepAlive: true,
          scrollTop: 0
        },
      },
    ]
  },


]

二、保留scrollTop的滑动位置

在项目中的全局路由拦截器中添加下面的代码，

（我是在router文件夹下面的index.js文件里写的，如下图所示）

router.beforeEach(async (to, from, next) => {
  if (fnCurrentRouteIsPageRoute(to, pageRoutes)) {
    return next()
  }
  if (!getToken()) {
    return next({
      name: 'transfer',
    })
  }
  if (from.meta.keepAlive) {
    const $container = document.querySelector('.main-container'); // 列表的外层容器
    const scrollTop = $container ? $container.scrollTop : 0;
    from.meta.scrollTop = scrollTop;
  }
  next()

})

router.afterEach(to => {
  window.document.title = window.SITE_CONFIG['documentTitle']

  //这里的代码对instList.vue文件没用，所以在instList.vue的混入文件中，另有处理
  const $container = document.querySelector('.main-container');
  if (to.meta.keepAlive && $container) {
    $container.scrollTop = to.meta.scrollTop || 0;
  }

})

用到vant2中的list组件的页面(instList.vue)需要做单独处理（不知道为啥router.afterEach中写的代码对用到list组件的文件不起作用）

下面是属于instList.vue的部分代码（完成代码请看我的另一篇博客：vue+vant2—篇1—如何使用list组件（下拉刷新，上滑分页加载）_有蝉的博客-CSDN博客）

    beforeRouteEnter(to, from, next) {
        next((vm) => {
            if (from.name == "resourceMgmt-instModel"||from.path == "/") {
                vm.$data.dataForm = vm.$options.data().dataForm
                vm.dataForm.modelId = vm.$route.query.modelId
                vm.onSearch();
            }
        });
    },
    activated() {
        if (this.$route.meta.keepAlive) {
          const scrollTop = this.$route.meta.scrollTop;
          const $container = document.querySelector('.main-container');
          $container.scrollTop = scrollTop;
        }
    },

这样就可以了。