鍍金池/ 問答/HTML5  HTML/ Vue 查看詳情B的返回列表A的，列表A的高度怎么才能在剛剛點進去的位置呢？

Vue 查看詳情B的返回列表A的，列表A的高度怎么才能在剛剛點進去的位置呢？

列表A是這樣的

clipboard.png

clipboard.png

我點擊下面的廠名，進去B詳情

clipboard.png

我現(xiàn)在從B詳情返回的時候默認的高度是0

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

所以的頁面點擊進去的時候高度都為0，但是這個頁面從B詳情返回A列表的時候 高度不能為0，高度要為剛剛進去B詳情的文職，這個怎么實現(xiàn)呢？

回答
編輯回答
不討囍

存session，a的高度，回來的時候調(diào)用一下，滾動到對應(yīng)高度

2017年1月24日 16:57
編輯回答
夏夕

看下這個文檔 滾動行為

2018年9月16日 16:50
編輯回答
默念

這個問題已經(jīng)解了
用的是Vue的 scrollBehavior
官方api是

clipboard.png
然而并沒有用，需要這樣

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

我還用到了 keep-alive（緩存）來達到后退時不刷新數(shù)據(jù)，前進時刷新數(shù)據(jù)的效果。

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
        //只處理設(shè)置了路由元信息的組件
        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...

2017年2月10日 12:53