1. 背景
vue 中有一個(gè) keep-alive 的功能积仗，可以將組件渲染結(jié)果緩存起來商乎，結(jié)合 vue-router 中使用押逼，可以緩存某個(gè) view 的整個(gè)內(nèi)容（比如列表頁）。
通常會(huì)有這樣的需求：
用戶單擊列表頁（List）中某個(gè)標(biāo)題胶惰，進(jìn)入到詳情頁（Detail）器仗。
此后會(huì)有兩種情況返回到 List：
- 用戶點(diǎn)擊導(dǎo)航欄中的 /list 鏈接;
- 用戶點(diǎn)擊瀏覽器返回按鈕 ←
情況 1 發(fā)生時(shí)，我們希望用戶進(jìn)入 List 后童番，頁面的數(shù)據(jù)需要刷新精钮。用戶在導(dǎo)航切換時(shí)（點(diǎn)擊導(dǎo)航菜單中的鏈接），其意愿是需要頁面刷新剃斧，由于我們的應(yīng)用是 SPA 應(yīng)用轨香，所以需要主動(dòng)重新發(fā)送 ajax 請求獲取數(shù)據(jù)，以讓用戶知曉幼东，頁面的數(shù)據(jù)有變化臂容，否則他還要手動(dòng)去點(diǎn)擊瀏覽器的刷新按鈕。
情況 2 發(fā)生時(shí)根蟹，我們希望用戶進(jìn)入 List 后脓杉，按照 h5 的行為自動(dòng)將滾動(dòng)條還原到原來位置，并且此時(shí)不應(yīng)刷新頁面數(shù)據(jù)简逮，直接使用緩存球散。
2. 實(shí)踐
需要緩存數(shù)據(jù)，那么在 app.vue 中的 router-view 配合使用 keep-alive :
2.1 使 router-view 結(jié)合 keep-alive
入口文件（app.vue）：
//- app.vue
<template lang="pug">
#app
.page-header
.page-main
keep-alive
router-view(v-if="$route.meta.keep_alive")
router-view(v-if="!$route.meta.keep_alive")
.page-footer
</template>
注： v-if 是加在 router-view 上散庶，而不是加在 keep-alive 上蕉堰。
2.2 配置路由
路由配置（router.coffee）：
# router.coffee
router = new VueRouter(
mode: 'history' # 需要使用 h5 模式，才能使用 scrollBehavior
routes: [
{
path: '/list'
name: 'list'
meta:
title: '列表頁'
keep_alive: true # true 表示需要使用緩存
component: require('../views/list.vue')
},
...
]
scrollBehavior: (to, from, saved_position) ->
# 保存到 meta 中悲龟，備用
to.meta.saved_position = saved_position
return saved_position ? {x: 0, y: 0}
)
注：
某一個(gè) route 的 meta.keep_alive 值屋讶，設(shè)定之后就不能再修改其值，即不能動(dòng)態(tài)變更 meta.keep_alive 的方式來動(dòng)態(tài)控制是否使用緩存须教。
原因：某個(gè) route.meta.keep_alive 初始設(shè)定為 true皿渗，會(huì)有以下兩種情況：
若在 scrollBehavior 中判斷出是情況 1，此時(shí)如果使用 to.meta.keep_alive = false 來禁用緩存，那么 app.vue 中的兩個(gè) router-view 會(huì)切換乐疆，之前緩存在 <keep-alive/> 中的第一個(gè) router-view 的數(shù)據(jù)划乖，會(huì)被 v-if 清空，導(dǎo)致緩存失效;
同理诀拭，當(dāng)判斷出是情況 2，如果 to.meta.keep_alive = true 來開啟緩存煤蚌，此時(shí)又會(huì)發(fā)生一次切換耕挨，導(dǎo)致重新生成組件。故 route.meta.keep_alive 一旦設(shè)定尉桩，就表示此組件一定是需要緩存的筒占，后期不能改變其值。
3. keep-alive 下控制數(shù)據(jù)刷新
既然不能改變 meta.keep_alive 的值蜘犁，那么如果做到在 keep-alive 包裹內(nèi)的組件進(jìn)行數(shù)據(jù)刷新呢翰苫？
答案是：使用 vue-router 中的 beforeRouteEnter 鉤子。
這里不能使用 vue 文檔中的 mounted这橙、updated 等生命周期中的鉤子函數(shù)奏窑，因?yàn)樵谑褂?keep-alive 后，這些鉤子屈扎，統(tǒng)統(tǒng)不會(huì)被調(diào)用埃唯。
而在 vue-router 中提供了 beforeRouteEnter 鉤子（您可以 查看 beforeRouteEnter 官方文檔 ）。
此鉤子與 keep-alive 無關(guān)鹰晨，不會(huì)像 mounted 等內(nèi)置鉤子那樣被 keep-alive “吃掉”墨叛。
# list.coffee
export default List =
name: 'List'
data: ->
lists: []
beforeRouteEnter: (to, from, next) ->
next (vm) ->
# 如果 saved_position === null，那么說明是點(diǎn)擊了導(dǎo)航鏈接（情況1）模蜡，
# 此時(shí)需要刷新數(shù)據(jù)漠趁，獲取新的列表內(nèi)容。
# 否則什么也不做忍疾，直接使用 keep-alive 中的緩存闯传。
if to.meta.saved_position is null
vm.fetchLists()
methods:
fetchLists: ->
@$store
.dispatch(types.dashboard.actions.GET_LISTS)
.then (res) =>
if res.status == 'success'
@posts = res.data
else
@posts_loading_error_message = res.data.msg
注： 注意 beforeRouteEnter 中使用的是 is null，而不是 if to.meta.saved_position?卤妒。
一點(diǎn)說明：
is null 相當(dāng)于 === null;
to.meta.saved_position? 相當(dāng)于 to.meta.saved_position == null丸边。
undefined == null 為 true，但 undefined === null 為 false荚孵。
這一點(diǎn)很重要妹窖，因?yàn)樵谡{(diào)試過程中，如果你在 beforeRouteEnter 的 next 方法中：
console.log to.meta.saved_position
當(dāng)點(diǎn)擊的是導(dǎo)航鏈接（情況 1）收叶，此時(shí)輸出 null骄呼，因?yàn)?scrollBehavior 中的 saved_position 為 null，你可以 查看 vue-router 的源碼 來確定值為什么是 null。
這里顯示相關(guān)代碼：
// src/util/scroll.js#L40
// wait until re-render finishes before scrolling
router.app.$nextTick(() => {
let position = getScrollPosition()
const shouldScroll = behavior(to, from, isPop ? position : null)
可以看出 isPop ? position : null 當(dāng)點(diǎn)擊導(dǎo)航鏈接（情況 1, isPop == false）時(shí)蜓萄，傳遞的是 null隅茎。
其中 isPop 可以理解為是否是點(diǎn)擊了瀏覽器后退按鈕。點(diǎn)擊了就傳遞 position嫉沽，否則傳遞 null辟犀。
那么什么時(shí)候會(huì)出現(xiàn) undefined 的情況呢？
上面代碼中的 position = getScrollPosition()绸硕，其 源碼 如下：
function getScrollPosition (): ?Object {
const key = getStateKey()
if (key) {
return positionStore[key]
}
}
其中 positionStore 的值由 函數(shù) saveScrollPosition 保存堂竟。
如果找到了 key 就返回，此時(shí)為形如 {x: 33, y: 12} 的值玻佩，表示之前橫縱滾動(dòng)條的位置出嘹。
如果沒有找到 key，此函數(shù)沒有返回任何內(nèi)容咬崔，那么自然是返回 undefined 了税稼。
以上。
此方法是有問題的垮斯，在 另外一篇文章 中解決郎仆。
