我这里捕获时机错误,如何修改? activated () { console.log('mot main index activated!!!!!!') const scrollCache = window.sessionStorage.getItem('MOT_MOT_BACK_SCROLLTOP') if (scrollCache) { this.$nextTick(() => { const height = document.getElementById('app').scrollHeight console.log('height =====>', height) // console.log('client', document.getElementById('app').clientWidth) // console.log('document.getElementById("app").scrollHeight', document.getElementById('app').scrollHeight) // console.log('MOT_SINGLE_SCROLLTOP', window.sessionStorage.getItem('MOT_SINGLE_SCROLLTOP')) console.log('scrollCache =====>', scrollCache) const scrollTop = scrollCache / 1000000 * height console.log('scrollTop =====>', scrollTop) document.getElementById('app').scrollTop = Number(scrollTop) console.log('scrollTop.now =====>', document.getElementById('app').scrollTop) }) } }, beforeRouteLeave(to, from, next) { const cache = document.getElementById('app').scrollTop const height = document.getElementById('app').scrollHeight const light = cache / height * 1000000 console.log('cache =====>', cache) window.sessionStorage.setItem('MOT_MOT_BACK_SCROLLTOP', light) next() },
时间: 2023-10-24 07:08:45 浏览: 83
根据您提供的代码,您的问题可能是在捕获滚动位置的时机上。根据您的代码,您是在组件的activated钩子函数中捕获滚动位置,但是activated钩子函数只有在组件首次渲染和缓存重新激活时才会被调用,因此在其他情况下,如组件已缓存但是用户切换了路由,activated钩子函数将不会被调用,这可能会导致您的滚动位置无法正确保存和恢复。为了解决这个问题,您可以考虑使用Vue Router提供的导航守卫来捕获滚动位置,确保无论何时用户切换路由,都可以正确保存和恢复滚动位置。以下是一个示例代码:
```javascript
// 在Vue Router中注册导航守卫
const router = new VueRouter({
routes: [...],
scrollBehavior(to, from, savedPosition) {
// 保存滚动位置
if (savedPosition) {
window.sessionStorage.setItem('MOT_MOT_BACK_SCROLLTOP', savedPosition.y)
} else {
window.sessionStorage.setItem('MOT_MOT_BACK_SCROLLTOP', document.documentElement.scrollTop || document.body.scrollTop)
}
// 返回滚动位置
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: Number(window.sessionStorage.getItem('MOT_MOT_BACK_SCROLLTOP') || 0) }
}
}
})
// 在组件中可以不再需要使用activated钩子函数
// 但是需要确保在组件中使用了Vue Router提供的<router-view>组件
```
在以上示例代码中,我们使用了Vue Router提供的scrollBehavior函数来保存和返回滚动位置。scrollBehavior函数在用户切换路由时会被自动调用,如果从缓存中恢复组件,则会将缓存中保存的滚动位置作为返回值,这样就可以确保在任何情况下都可以正确保存和恢复滚动位置。
阅读全文