AJAX技术文案沙雕,vue-router 中使用 keep-alive 控制 ajax 请求的缓存策略(二)

前文的解决方法 其实是有问题的。

1. 问题

前文提到 saved_position 的返回值有时是 undefined，有时是 null。经过仔细调试，可以发现 undefined 只会出现一次，以后都是出现 null。出现的过程为：

用户访问具有 keep-alive 的 List 页面

用户点击 router-link 切换到其他页面

点击浏览器后退按钮，回到 List 页面，此时的 saved_position 值即为 undefined

之后所有的后退前进都是 null，不再有 undefined。

但是步骤 3 当中，其实应该是有值的，但 vue 的实现中会生成很多的 _key，这个实现其实是有问题的，生成了很多多余的 _key，导致与用户的浏览器历史行为不一致，导致出现 undefined。

2.终极解决文案

既然 vue-router 保存的滚动条值是错误的，那么我们自己保存好了，然后在适当的时机进行“位置修复”。

# router.coffee

router = new VueRouter(

mode: 'history'

routes: [

{

path: '/list'

name: 'list'

meta:

title: '列表页'

keep_alive: true

saved_position: {x: 0, y: 0} # 这里新增设置默认值为顶顶

component: require('../views/list.vue')

},

...

]

scrollBehavior: (to, from, saved_position) ->

# 点击了非浏览器按钮，则设置为 null，方便组件中刷新 ajax 数据

if saved_position == null

if to.meta.keep_alive

to.meta.saved_position = null

# 点击了浏览器前进/后退，则直接使用正确的位置，并且组件知道不是 null，

# 不会刷新 ajax 数据

else

saved_position = to.meta.saved_position

return saved_position ? {x: 0, y: 0}

)

router.beforeEach (to, from, next) ->

# 存储滚动条位置

if from.meta.keep_alive

from.meta.saved_position =

x: window.pageXOffset

y: window.pageYOffset

next()

我们在，router.beforeEach 中在页面切换之前，保存当前滚动条的位置到相关的 meta.saved_position 中。

在 scrollBehavior 中还原，这样位置就不会出现 undefined 了。

接下来就是在组件中如何更新 ajax 数据了：

# list.coffee

export default Dashboard =

name: 'Dashboard'

data: ->

posts: []

beforeRouteEnter: (to, from, next) ->

next (vm) ->

# 如果为 null，则说明点击了 router-link，此时可刷新 ajax 数据。

# 否则，为点击了浏览器后退/前进，什么也不做即可。

# 交给 keep-alive 处理缓存，scrollBehavior 处理修复后的滚动条位置。

if to.meta.saved_position == null

vm.fetchPosts()

# 或者你有其他控制逻辑，如：

# 帖子列表为空时，也强制获取 ajax 数据：

if (to.meta.saved_position == null) or (vm.posts.length == 0)

vm.fetchPosts()

methods:

fetchPosts: (type) ->

@$store

.dispatch(types.dashboard.actions.GET_POSTS)

.then (res) =>

...

以上。