vue 移动端使用物理键返回,当前页面会在销毁前触发滚动
时间: 2024-02-19 16:02:41 浏览: 44
这可能是因为移动端的物理键返回触发了浏览器的后退事件,导致页面重新加载并回到前一个页面。当页面重新加载时,滚动位置也会被重置并导致滚动到页面顶部。解决方法可以是在页面销毁前记录当前滚动位置,在重新加载页面时将滚动位置恢复到之前的位置。可以使用 Vue Router 提供的导航守卫来实现这个功能。具体的实现方式可以参考以下代码:
```
// 在路由配置中定义全局的 afterEach 钩子
const router = new VueRouter({
routes: [...],
scrollBehavior(to, from, savedPosition) {
// 在路由切换时记录滚动位置
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})
router.afterEach((to, from) => {
// 在页面销毁前记录滚动位置
from.meta.savedPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
})
// 在页面加载时恢复滚动位置
export default {
mounted() {
if (this.$route.meta.savedPosition) {
window.scrollTo(0, this.$route.meta.savedPosition)
}
}
}
```
阅读全文