本文很長，但是很詳細，請耐心看完就一目瞭然了有下篇

keep-alive 是 Vue 內建的一個元件，使被包含的元件保留狀態，或避免重新渲染。

1. 基礎用法，快取所有路由：

<keep-alive>
　　<router-view>
　　　　<!-- 這裡是會被快取所有的檢視元件 -->
　　</router-view>
</keep-alive>

如果想要單一快取一個怎麼辦呢？看下面

2. 初級用法，快取指定路由：

　　　　vue 2.1.0後提供了include/exclude兩個屬性: 下圖為官方用法：

　　　　　　include - 字串或正則表達，只有匹配的元件會被快取

　　　　　　exclude - 字串或正則表示式，任何匹配的元件都不會被快取

// 元件 a
export default {
  name: 'a',//先定義好元件名字 才能被快取
  data () {
    return {}
  }
}
<keep-alive include="a,b">
  <router-view>
    <!-- name 為 a以及b 的元件將被快取！ -->
  </router-view>
</keep-alive>

<keep-alive exclude="a">
  <router-view>
    <!-- 除了 name 為 a 的元件都將被快取！ -->
 

  </router-view>
</keep-alive>

3. 進階用法，結合vue-router 快取指定路由：這裡包含兩個用法方式,也可以一塊用，看個人習慣了，我偏向用 路由meta控制

方式1：路由表meta + 公共main元件判斷

//修改1.在路由表js  增加 router.meta 屬性
// routes 配置
export default [
  {
    path: '/home',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: 
 
true // 需要被快取
    }
  }, {
    path: '/edit,
    name: 'edit',
    component: Edit,
    meta: {
      keepAlive: false // 不需要被快取
    }
  }
]
//修改2.在公共main元件修改 下面是元件裡的程式碼
<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 這裡載入會被快取的檢視元件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 這裡載入不被快取的檢視元件，比如 Edit！ -->
</router-view>
//修改3.在

方式2：路由表meta + 元件內設定name屬性

//修改1.在路由表js  增加 router.meta 屬性
    // routes 配置
    export default [
    {
        path: '/home',
        name: 'home',
        component: Home,
        meta: {
        keepAlive: true // 需要被快取
        }
    }, {
        path: '/edit,
        name: 'edit',
        component: Edit,
        meta: {
        keepAlive: false // 不需要被快取
        }
    }
    ]
//修改2.在要快取的元件 設定那麼屬性
　　// 元件 a
　　export default {
  　　name: 'home',//先定義好元件名字 才能被快取

  　　data () {
    　　return {}
  　　}
　　}

4.高階用法，指定從什麼元件進入才快取，以及銷燬快取：先介紹我發現的網上一些博主寫的有bug的方法，在介紹自己的方法。