方法一：
1.在router.js里面（即路由文件中），此時模式為 history
const router = new VueRouter({
mode: 'history',
routes,
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
if (from.meta.keepAlive) {
from.meta.savedPosition = document.body.scrollTop
}
return { x: 0, y: to.meta.savedPosition || 0 }
}
}
})
2.在router.js里面需要記錄位置的單頁面里面
let routes = [
{
path: '/',
name: 'home',
component: home,
meta: {
title: 'home',
keepAlive: true
}
}
3.App.vue里面<div id="app"> 這樣寫的意義就是不緩存所有頁面，哪個地方寫了 keepAlive：true,哪個地方就記錄位置(加緩存)
<keep-alive >
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
4.位置確實記錄上了(加緩存，返回不刷新頁面)，弊端就是返回不觸發created，所以有些頁面需要返回觸發的東西都寫在activated里面。
方法二：
beforeRouteLeave(to, from, next){
let position = window.scrollY()
this.$store.commit('SAVE_POSITION', position) //離開路由時把位置存起來
next()
}
在頁面中取值
updated () {
this.$nextTick(function(){
let position = this.$store.state.position //返回頁面取出來
window.scroll(0, position)
})
}
用updated 或者 beforeUpdate 鈎子都可以 代碼都寫在要保存滑動距離的界面
方法三：用默認的hash模式的
一個list頁點擊進入detail頁，我在這時記錄下list頁滾動條的位置，然后在detail頁返回到list頁時設置滾動條位置為剛才保存那個值。
// list頁route中的data鈎子
route : {
data : function () {
var _this = this;
// 返回同一個位置
var scrollTop = sessionStorage.getItem("scrollTop");
if (scrollTop) {
_this.$nextTick(function () {
$(".abuild-record-layout").scrollTop(scrollTop);
});
}
}
}
$nextTick將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調的 this 自動綁定到調用它的實例上。
方法四：scrollBehavior方法
1.router文件中設置為 mode: 'history', 模式
2.router設置
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
原文鏈接：https://blog.csdn.net/qq_40963664/article/details/79850589