Vue 查看详情B的返回列表A的，列表A的高度怎么才能在刚刚点进去的位置呢？

Question

列表A是这样的

我点击下面的厂名，进去B详情

我现在从B详情返回的时候默认的高度是0

  router.afterEach((to, from, next) => {
    window.scrollTo(0,0);
   document.title = to.name;
});

所以的页面点击进去的时候高度都为0，但是这个页面从B详情返回A列表的时候 高度不能为0，高度要为刚刚进去B详情的文职，这个怎么实现呢？

Answer 1

看下这个文档 滚动行为

Answer 2

存session，a的高度，回来的时候调用一下，滚动到对应高度

Answer 3

这个问题已经解了
用的是Vue的 scrollBehavior
官方api是

然而并没有用，需要这样

scrollBehavior (to, from, savedPosition) {
    console.log(savedPosition);
 if(savedPosition) {
    setTimeout(() => {
        window.scrollTo(savedPosition.x, savedPosition.y)
    }, 200)
}else {
      console.log("执行了else")
    return { x: 0, y: 0 }
  }
}

我还用到了 keep-alive（缓存）来达到后退时不刷新数据，前进时刷新数据的效果。

new VueRouter({
   mode: 'history',
    routes: [{
    path: '/foo',    
    component: (resolve) => {
        require(['views/foo'], resolve)
    },
    meta: {isKeepAlive: true}
}],
scrollBehavior (to, from, savedPosition) {
    if (savedPosition || typeof savedPosition == 'undefined') { //从第二页返回首页时savePosition为undefined
        //只处理设置了路由元信息的组件
        from.meta.isKeepAlive = typeof from.meta.isKeepAlive == 'undefined' ? undefined : false;
        to.meta.isKeepAlive = typeof to.meta.isKeepAlive == 'undefined' ? undefined : true;
        if(savedPosition) {
            return savedPosition;
        }
    } else {
        from.meta.isKeepAlive = typeof from.meta.isKeepAlive == 'undefined' ? undefined : true;
        to.meta.isKeepAlive = typeof to.meta.isKeepAlive == 'undefined' ? undefined : false;
    }
  }
 })

参考：https://segmentfault.com/q/10...