vue-router 中使用 keep-alive 控制 aja

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

1. 问题

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

1. 用户访问具有 keep-alive 的 List 页面
2. 用户点击 router-link 切换到其他页面
3. 点击浏览器后退按钮，回到 List 页面，此时的 saved_position 值即为 undefined
4. 之后所有的后退前进都是 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) =>
                ...

以上。