有時候會有這種情況，從串列頁面進入詳情頁面，然后點擊回傳的時候，我們的介面會重新呼叫，頁面也會跑到頂部，這樣用戶體驗是很不好的，每次用戶都得從上往下從新翻，下面就給大家介紹如何解決這種問題；
Vue 提供的方法
當創建一個 Router 實體，你可以提供一個 scrollBehavior 方法：
注意: 這個功能只在支持 history.pushState 的瀏覽器中可用，
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滾動到哪個的位置
}
})
scrollBehavior 方法接收 to 和 from 路由物件，第三個引數 savedPosition 當且僅當 popstate 導航 (通過瀏覽器的 前進/后退 按鈕觸發) 時才可用，
這種方法只有當body或window發生滾動是才會記錄頁面的滾動距離（個人認為是這樣，因為在我的專案中沒有使用成功！！！！）
那如果我的頁面是有上、中、下三個盒子組成，上下定高，中間可滾動，我現在只想記錄中間盒子的滾動距離，要如何去做呢？下面詳解
因為涉及到多個組件的切換，所以用vuex來管理這個數值
export default new Vuex.Store({
state: {
scrollH: 0,
},
mutations: {
scrollChange(state, val) {
state.scrollH = val;
},
})
滾動時觸發scrollChange函式
that.$store.commit('scrollChange',scrollTopH);
當從詳情頁面，回到前一頁，并想讓其保留在之前的位置，可以在想要滾動的頁面執行
activated(){
// 等到DOM更新完成之后，然后，執行this.$nextTick，類似于Promise then()
this.$nextTick(() => {
this.$refs.pags.scrollTo(0, this.scrollH);
// this.$refs.pags.scrollTo(0, this.scrollH);
// console.log('你好嗎',this.scrollH);
})
},
activated()：
activated()在vue物件存活的情況下，進入當前存在activated()函式的頁面時，一進入頁面就觸發；可用于初始化頁面資料、keepalive快取組件后，可執行方法；
deactivated()：離開組件時執行；
注意：activated()和deactivated()只有在<keep-alive></keep-alive>包裹的時候才有效；
this.$nextTick()
Vue 在更新 DOM 時是異步執行的，為了在資料變化之后等待 Vue 完成更新 DOM，可以在資料變化之后立即使用 Vue.nextTick(callback)，這樣回呼函式將在 DOM 更新完成后被呼叫，
如果你只想讓從詳情頁回來時，保持上次的狀態，添加個路由守衛即可
//如果不是從詳情頁進入，則就使滾動高度為0
beforeRouteLeave (to, from, next){
if(to.name!="Detail"){
this.$store.commit("scrollChange",0)
}
next()
},
注意：
組件內的守衛
-
beforeRouteEnter (to, from, next)
不！能！獲取組件實體this，因為當守衛執行前，組件實體還沒被創建 -
beforeRouteUpdate (to, from, next)
在當前路由改變，但是該組件被復用時呼叫 可以訪問組件實體 `this` -
beforeRouteLeave (to, from, next)
導航離開該組件的對應路由時呼叫，可以訪問組件實體 `this`
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/99749.html
標籤：其他