vue单页应用页面缓存方案

在最近公司的项目开发当中 （h5），有一个文章列表页，我发现每次点击文章进入文章详情页面，回来之后都要重新loading页面，于是我便想到如何将页面缓存。

首先我想到的是方案A：

方案一：vue的keep-alive组件

具体使用如下：

<keep-alive max="10"> <router-view/> </keep-alive>

这样所有的页面都会进行缓存。
包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。主要用于保留组件状态或避免重新渲染。

因为缓存的需要通常出现在切换页面时，所以就需要结合vue-router的router-view来实现
1：
在router文件中
const router = new Router({
routes: [

{
  path: "/",
  redirect: "/index/artical", 
  component: resolve => require(['@/components/index'], resolve),
  meta: {
    title: "store.state.nickname",
    keepAlive: false // 需要被缓存
  }
},

{
  path: "/tagLanding",

  component:  resolve => require(['@/components/tagLanding'], resolve),
  meta: {
    keepAlive: false // 需要被缓存
  }
},
{
  path: "/login",
  component:  resolve => require(['@/components/login'], resolve),
  meta: {
    title: "我的微书",
    keepAlive: false // 需要被缓存
  },
},
{
  path: "/index",
  name: "index",
  redirect: '/index/artical',
  component:resolve => require(['@/components/index.vue'], resolve),
  children:[
    {
      path:"artical",
      name:"artical",
      component:resolve => require(['@/components/artical.vue'], resolve),
      meta: {
        title: `我的微书`,
        keepAlive: true // 需要被缓存
      }
    },
    {
    name:"otherArtical",
    path:"otherArtical",
    component:resolve => require(['@/components/otherArtical.vue'], resolve),
    meta: {
      keepAlive: true // 需要被缓存
    }
   },
    {
      name:"aticalDetail",
      path:"aticalDetail",
      component:resolve => require(['@/components/aticalDetail'], resolve),
      "meta": {
        // keepAlive: true // 需要被缓存
        keepAlive: false // 需要被缓存
    }
      
    },
],
  // meta: {
  //   title: `首页`
  // }
},
// {
//   path: "/aticalDetail",
//   name: "aticalDetail",
//   component:  resolve => require(['@/components/aticalDetail'], resolve),
//   meta: {
//     title: "文章详情页"
//   }
// },
{
  path: "/mine",
  name: "mine",
  component:  resolve => require(['@/components/mine'], resolve),
  meta: {
    title: "我的微书",
    keepAlive: false // 需要被缓存
  }
},
{
  path: "/addTag",
  name: "addTag",
  component:   resolve => require(['@/components/addTag'], resolve),
  meta: {
    title: "创建微书",
    keepAlive: false // 需要被缓存
  }
},
{
  path: "/goodsList",
  name: "goodsList",
  component:  resolve => require(['@/common/goodsList'], resolve), 
  meta: {
    title: "全部商品",
    keepAlive: false // 需要被缓存
  }
},
{
  path: "/404",
  name: "notFind", 
  component:  resolve => require(['@/components/404'], resolve), 
  meta: {
    title: "404",
    keepAlive: false // 需要被缓存
  }
},

]
});

设置meta属性，添加keepAlive字段，需要缓存的为true

2.在app中

 <keep-alive>
 		<router-view  v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 		<router-view v-if="!$route.meta.keepAlive"></router-view>

我们知道 keep-alive 之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。故，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。
所以，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中