1. 背景
vue 中有一个 keep-alive 的功能，可以将组件渲染结果缓存起来，结合 vue-router 中使用，可以缓存某个 view 的整个内容（比如列表页）。
通常会有这样的需求：
用户单击列表页（List）中某个标题，进入到详情页（Detail）。
此后会有两种情况返回到 List：
- 用户点击导航栏中的 /list 链接;
- 用户点击浏览器返回按钮 ←
情况 1 发生时，我们希望用户进入 List 后，页面的数据需要刷新。用户在导航切换时（点击导航菜单中的链接），其意愿是需要页面刷新，由于我们的应用是 SPA 应用，所以需要主动重新发送 ajax 请求获取数据，以让用户知晓，页面的数据有变化，否则他还要手动去点击浏览器的刷新按钮。
情况 2 发生时，我们希望用户进入 List 后，按照 h5 的行为自动将滚动条还原到原来位置，并且此时不应刷新页面数据，直接使用缓存。
2. 实践
需要缓存数据，那么在 app.vue 中的 router-view 配合使用 keep-alive :
2.1 使 router-view 结合 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}
)
注：
某一个 route 的 meta.keep_alive 值，设定之后就不能再修改其值，即不能动态变更 meta.keep_alive 的方式来动态控制是否使用缓存。
原因：某个 route.meta.keep_alive 初始设定为 true，会有以下两种情况：
若在 scrollBehavior 中判断出是情况 1，此时如果使用 to.meta.keep_alive = false 来禁用缓存，那么 app.vue 中的两个 router-view 会切换，之前缓存在 <keep-alive/> 中的第一个 router-view 的数据，会被 v-if 清空，导致缓存失效;
同理，当判断出是情况 2，如果 to.meta.keep_alive = true 来开启缓存，此时又会发生一次切换，导致重新生成组件。故 route.meta.keep_alive 一旦设定，就表示此组件一定是需要缓存的，后期不能改变其值。
3. keep-alive 下控制数据刷新
既然不能改变 meta.keep_alive 的值，那么如果做到在 keep-alive 包裹内的组件进行数据刷新呢？
答案是：使用 vue-router 中的 beforeRouteEnter 钩子。
这里不能使用 vue 文档中的 mounted、updated 等生命周期中的钩子函数，因为在使用 keep-alive 后，这些钩子，统统不会被调用。
而在 vue-router 中提供了 beforeRouteEnter 钩子（您可以 查看 beforeRouteEnter 官方文档 ）。
此钩子与 keep-alive 无关，不会像 mounted 等内置钩子那样被 keep-alive “吃掉”。
# list.coffee
export default List =
name: 'List'
data: ->
lists: []
beforeRouteEnter: (to, from, next) ->
next (vm) ->
# 如果 saved_position === null，那么说明是点击了导航链接（情况1），
# 此时需要刷新数据，获取新的列表内容。
# 否则什么也不做，直接使用 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?。
一点说明：
is null 相当于 === null;
to.meta.saved_position? 相当于 to.meta.saved_position == null。
undefined == null 为 true，但 undefined === null 为 false。
这一点很重要，因为在调试过程中，如果你在 beforeRouteEnter 的 next 方法中：
console.log to.meta.saved_position
当点击的是导航链接（情况 1），此时输出 null，因为 scrollBehavior 中的 saved_position 为 null，你可以 查看 vue-router 的源码 来确定值为什么是 null。
这里显示相关代码：
// 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 当点击导航链接（情况 1, isPop == false）时，传递的是 null。
其中 isPop 可以理解为是否是点击了浏览器后退按钮。点击了就传递 position，否则传递 null。
那么什么时候会出现 undefined 的情况呢？
上面代码中的 position = getScrollPosition()，其 源码 如下：
function getScrollPosition (): ?Object {
const key = getStateKey()
if (key) {
return positionStore[key]
}
}
其中 positionStore 的值由 函数 saveScrollPosition 保存。
如果找到了 key 就返回，此时为形如 {x: 33, y: 12} 的值，表示之前横纵滚动条的位置。
如果没有找到 key，此函数没有返回任何内容，那么自然是返回 undefined 了。
以上。
此方法是有问题的，在 另外一篇文章 中解决。
网友评论