VUE项目缓存keep-alive应用

首先我们来谈谈keep-alive，它Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素。

被包裹在keep-alive中的组件的状态将会被保留，例如我们将某个列表类组件内容滑动到第100条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第100条列表处；

关于这一点也是仁者见仁，有的产品可能会要求在每一次进入一个组件时页面的初始位置都是保持在顶部的，这里可以利用Vue中的滚动行为，但是前提是你是HTML5 history模式

keep-alive的常用应用场景：

1.form表单内容缓存（路由改变不刷新页面）

2。单页面状态内容缓存

3.列表list滚动条高度缓存（例如今日头条点击进入内容详情，返回依旧在那个位置）还有其他一些用处就不一一说明了。

接下来就教会大家怎么使用keep-alive，写法很多；我的这种可能比较的简单。

第一步、首先在app.vue里面加上需要缓存的组件（切记组件内必须要有name标识）

<template>
  <div id="app">
    <keep-alive include="login,activityIndex">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

第二步、路由文件router>index.js 这个savedPosition：true是你想缓存滚动条必须加上，如果只是缓存表单数据之类的不用操作路由。

{
  name: 'activityIndex',
  path: '/activityIndex',
  component: ActivityIndex,
  meta: {
    title: '精彩活动',
    savedPosition: true
  }
}

切记：缓存的组件必须带有name标识，不然不生效。

最后说一个路由模式的问题：

做移动端H5开发的时候hash模式在安卓机上无法成功渲染页面，history模式正常（也算是我自己踩过的坑）