vue.js每次切换路由时无法正确重置滚动位置？

Question

//a.vue
export default {
    events:{
        SetScroll: function(){
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            scrollTop = 300;
            alert(scrollTop);
        }
    },
    route: {
                data: function () {
                    this.$emit('SetScroll')
                }
              }
}

a组件页面是用ajax请求数据后v-for渲染的一个列表页。
需求是从a组件跳到同级的b组件然后再跳回来的时候要把滚动位置定位在300这里。现在问题是每次返回a组件时alert能正常弹出来，但位置就是在顶部没有滚下来。

Answer 1

Vue 的节点是异步渲染，当执行到 scrollTop = 300 时页面节点不一定渲染了出来，来举个例子：

如上图，this.listData 已经明明被赋值，浏览器里面却没有任何东西渲染出来。再看下一张图：

在 setTimeout 进行断点，此时可看到方块已经被 v-for 出来了。

那么结论就很明显：题主在执行 scrollTop = 300 时因为页面中根本没有渲染出组件，因此很可能是因为高度不够，滚不到 300.

解决方法也很简单，使用 setTimeout 将操作推入任务队列，在 v-for 执行完毕后再 scrollTop.

另外发现：滚动用法有问题，这样只是取值.

Answer 2

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    scrollTop = 300;
    
        这里显然出错了，因为scrollTop并未保存引用，而是复制了值。
        
    if(window.pageYOffset)window.pageYOffset=300;
    if(document.documentElement.scrollTop)document.documentElement.scrollTop=300;
    if(document.body.scrollTop)document.body.scrollTop=300;
    
    这样就可以了，虽说不太优雅。

Answer 3

nextTick

http://cn.vuejs.org/api/#Vue-...