首先我們來談談keep-alive，它Vue提供的一個抽象元件，用來對元件進行快取，從而節省效能，由於是一個抽象元件，所以在v頁面渲染完畢後不會被渲染成一個DOM元素。

被包裹在keep-alive中的元件的狀態將會被保留，例如我們將某個列表類元件內容滑動到第100條位置，那麼我們在切換到一個元件後再次切換回到該元件，該元件的位置狀態依舊會保持在第100條列表處；

關於這一點也是仁者見仁，有的產品可能會要求在每一次進入一個元件時頁面的初始位置都是保持在頂部的，這裡可以利用Vue中的滾動行為，但是前提是你是HTML5 history模式

keep-alive的常用應用場景：

1.form表單內容快取（路由改變不重新整理頁面）

2。單頁面狀態內容快取

接下來就教會大家怎麼使用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模式正常（也算是小編我自己踩過的坑）