遇到了以下两个问题:
1.a页面跳转b页面后,b页面的document.body.scrollTop距离不是0而是a页面的值。
2.a页面滑动一段距离后跳转b页面,再从b页面返回至a页面时,a页面滚动条位置没有保留原来的位置。
我是先遇到了问题2,在处理问题2的过程中,遇到了问题1。通过在网上查看大家的解决方法,了解到可以用keepAlive内置组件解决问题2,我选择了下面这个方法:
<keep-alive >
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
添加文件:app.vue
{
name: 'home',
path: '/index',
component: Home,
meta: {
keepAlive: true,
fromAddress: ''
}
}
添加文件:router.js
先给app.vue里添加keepAlive,通过判断路由元信息里的keepAlive值,来决定是否缓存信息。
beforeRouteLeave(to, from, next) {
this.offsetTop = document.body.scrollTop //this.offsetTop 是加在data里存储的
next()
},
beforeRouteEnter(to, from, next) {
if (from.path === '/goodsdetail') { to.meta.fromAddress = 'detail' }
next()
},
// 回到列表 恢复高度
activated() {
console.log(this.$route)
// 恢复滚动高度
if (this.$route.meta.fromAddress === 'detail') { document.body.scrollTop = this.offsetTop }
this.$route.meta.fromAddress === ''
},
添加文件:index.vue (列表数据的文件上)
然后在a页面添加了beforeRouteEnter、beforeRouteLeave、activated 三个函数。
离开a页面时会触发beforeRouteLeave,这边我把获取到的scrollTop存在data里(个人觉得是因为被keepAlive缓存下来了,所以下次进入页面时可以读取到)
从b页面返回至a页面时,会触发beforeRouteEnter、activated,我这里把改变滚动条位置做了一个判断,仅从b页面过来时才触发,我写在了activeted里。把之前存储的offsetTop给到document.body.scrollTop,这样就可以做到a页面的位置保持不变的效果。
下面记录下问题1的解决方法,原理是每次跳转后把页面的scrollTop变成0.
const router = new VueRouter({
mode: 'hash',
routes
})
router.beforeEach((to, from, next) => {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
next()
})
添加文件:router.js
不确定这样做是否有什么bug,但目前我还没有发现。