需求：
当切换不同路由时，期望切换后的路由页面保留上次滚动的位置。
解决思路：
利用路由中的meta属性，对不同路由页面滚动的位置做缓存，切换路由时，获取当前路由meta属性中缓存的滚动位置，再自动滚动到此位置即可。
具体代码：
router.js文件
<!-- 操作一 -->
// 在meta属性中增加scrollTop属性
{
path: 'goodList',
name: 'goodList',
meta: {
title: '商品列表',
scrollTop: 0
},
component: resolve => require(['@/pages/goodList/index.vue'], resolve)
},
layout.vue文件
<!-- 操作二 -->
// 在指定内容页视图元素中，添加ref属性及mousewheel事件
<div ref="scrollView" @mousewheel="scrollChange">
<keep-alive>
<router-view v-if="!needRelogin" :key="$route.fullPath" ref="pageView"></router-view>
</keep-alive>
</div>
<!-- 操作三 -->
// methods中定义滚动监听事件，设置路由meta属性里面的指定参数
scrollChange(e) {
console.log('父滚动条到页面顶部距离', e.target.offsetTop)
console.log('相对距离', this.$refs.scrollView.scrollTop)
console.log('绝对距离', e.target.offsetTop + this.$refs.scrollView.scrollTop)
// 设置路由参数scrollTop等于当前元素的相对距离
this.$route.meta.scrollTop = this.$refs.scrollView.scrollTop
}
<!-- 操作四 -->
// monted中给元素添加滚动监听
mounted() {
// 获取指定元素
const scrollView = this.$refs['scrollView']
// 添加滚动监听
scrollView.addEventListener('scroll', this.scrollChange, true)
},
<!-- 操作五 -->
// 销毁监听
beforeDestroy() {
// 获取指定元素
const scrollView = this.$refs['scrollView']
// 移除监听
scrollView.removeEventListener('scroll', this.scrollChange, true)
},
<!-- 操作六 -->
// 监听路由变化时，自动滚动到上次缓存的位置
watch: {
'$route.path': {
handler: () => {
// 自动滚动到上一次缓存位置
this.$nextTick(() => {
this.$refs.scrollView.scrollTo(0, this.$route.meta?.scrollTop || 0)
})
},
// 深度观察监听
deep: true
}
},
备注： 以上就是所有代码啦，本文所提供的方法可适用于所有vue工程项目，可解决vue-router 所提供方法 scrollBehavior 和 keepAlive不生效等问题。