vue 路由跳转记住滚动位置，返回时回到上次滚动位置

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

参考：https://blog.csdn.net/qq_40204835/article/details/79853685

方法一：利用Keep-Alive和监听器

1.首先在路由中引入需要的模块

{
path: ‘/scrollDemo’,
name: ‘scrollDemo’,
meta: {
keepAlive: true // 需要缓存
},
component: resolve => { require([‘../view/scrollDemo.vue’],
resolve) }
}

2.在App.vue中设置缓存组件

<keep-alive> // 缓存组件跳转的页面
<router-view v-if="$route.meta.keepAlive" class="ui-view" transition-mode="out-in"></router-view>
</keep-alive>
// 非缓存组件跳转页面
<router-view v-if="!$route.meta.keepAlive" class="ui-view" transition-mode="out-in"></router-view>

3.在页面注册对应的事件

(1). 在data中定义一个初始值 scroll

(2). 在mouted中，mouted中的方法代表dom已经加载完毕

window.addEventListener('scroll', this.handleScroll);

(3).methods 用于存放页面函数

handleScroll () {
this.scroll = document.documentElement && document.documentElement.scrollTop
console.log(this.scroll)
}

4.activated 为keep-alive加载时调用

activated() {
if(this.scroll > 0){
window.scrollTo(0, this.scroll);
this.scroll = 0;
window.addEventListener('scroll', this.handleScroll);
}
}

5.deactivated 页面退出时关闭事件防止其他页面出现问题

deactivated(){
window.removeEventListener('scroll', this.handleScroll);
}

方法二：利用beforeRouteLeave和watch

main.js中：

var store = new Vuex.Store({ //记得先引入vuex
state: {
recruitScrollY: 0
},
getters: {
recruitScrollY: state => state.recruitScrollY
},
mutations: {
changeRecruitScrollY(state, recruitScrollY) {
state.recruitScrollY = recruitScrollY;
}
},
actions: { },
modules: {}
})

组件中(/flashSaleListX为当前组件，即需要记住滚动条位置的组件)：

methods:{
isTabRoute: function() {
if (this.$route.path === '/flashSaleListX') {
let recruitScrollY = this.$store.state.recruitScrollY
document.documentElement.scrollTop = recruitScrollY;
}
}
},
watch: {
'$route': 'isTabRoute',
},
beforeRouteLeave(to, from, next) {
let position = document.documentElement && document.documentElement.scrollTop; //记录离开页面时的位置 if (position == null) position = 0
this.$store.commit('changeRecruitScrollY', position) //离开路由时把位置存起来
next()
}

方法三：（适用于方法二获取不到滚动位置）

组件中：

beforeRouteEnter(to, from, next) {
next(vm => {
const div1 = vm.$refs.div1
// 记录滚动高度
div1.scrollTop = vm.scroll
})
},
beforeRouteLeave(to, from, next) {
const div1 = this.$refs.div1;
this.scroll = div1.scrollTop; //data中记得定义变量scroll
next()
}

注：在路由配置中，记住滚动的页面keep-alive需为true