Vue缓存页面内容及路由跳转前的页面滚动位置

开发中有些业务场景组件数据是不用刷新的，我将这些常用数据比作我们开发语言中的常量，一般情况下是不做改变的，也不用重新做接口请求，这里就是记载Vue中我们如何缓存组件数据以及它的生命周期

首先我们前端都知道SPA应用——单页面应用程序，

是有一个入口文件的，在Vue中的页面模板入口是一个App.vue文件，这个文件是相当于我们传统布局最外层的DIV。

这里根据业务需求决定KeepAlive的bol变量值，是否缓存跳转后的路由组件内容，而includes数组的值一开始存到vuex的store仓库state中并命名为cacheArr空数组，根据业务需求动态更改store仓库中存储的缓存数组组件变量cacheArr并在使用keepalive的组件中使用watch监听路由的变更，来实时更改includes变量，这样一来我们就可以动态缓存以及删除缓存组件的数据了。

这里给大家转载一些更加详细的应用案例博客地址

https://blog.csdn.net/Liu_yunzhao/article/details/102821321

https://blog.csdn.net/qq_35728290/article/details/83006577

https://segmentfault.com/a/1190000018705351

那么如何缓存页面路由跳转前的滚动位置呢？

这里介绍vue-router中配置路由文件有两个模式：hash模式（默认模式）和history模式，

默认模式启动的服务地址栏是这样的

http://localhost:8080/#/

可以看到地址栏会带上#，若想不展示则修改路由文件的配置项mode属性值

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Main
    }
  ]
})

Vue中的history模式原理是根据H5的history来的，所以可以记录页面的滚动位置并且提供了相应的配置项，在routes数组后面加上scrollBehavior函数

scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      /* 根据路由元信息详细控制滚动位置 */
      const position = {}
      // 若存在锚点，则跳转锚点位置
      if (to.hash) {
        position.selector = to.hash;
      }
      // 若果meta中存在scrolltop属性并且为true，则默认跳转时滚动到顶部
      if (to.matched.some(m => m.meta.scrollToTop)) {
        position.x = 0;
        position.y = 0;
      }
      // 若是需要缓存的组件，则将当前窗口的滚动位置保存到路由元信息中
      if (from.meta.KeepAlive) {
        from.meta.savedPosition = document.body.scrollTop;
      }
      return position;
    }
  }