vue禁止ajax缓存,vue-router 中使用控制 ajax 请求的缓存策略

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 #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

注： 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 会切换，之前缓存在 中的 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 钩子。此钩子与 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。

这里显示相关代码：

// src/util/scroll.js#L40// wait until re-render finishes before scrollingrouter.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 了。