前言
这段时间在写weilan_M
模板的时候考虑路由切换的时候缓存页面的同时保留滚动条原先的位置,刚开始尝试用router
的scrollBehavior
,但是实现不了我的需求,也有可能是我用的不对吧,所以就采用了onBeforeRouteLeave
和onActivated
实现
正文
首先肯定要先在路由的meta里增加KeepAlive
属性
在页面定义个变量来存储离开前页面的滚动距离,然后在onActivated
生命周期里使用window.scrollTo
滚动到指定的位置
const scrollY = ref(0)
onBeforeRouteLeave((to, from, next) => {
scrollY.value = window.scrollY
next()
})
onActivated(() => {
window.scrollTo(0, scrollY.value)
})
如果有啥更好的更简单的方法请告诉我
2 条评论
我 使用这个发现在谷歌浏览器可以正常滚动到保存的位置,但在其他浏览器就不滚动了。这是什么原因呢
其他浏览器指的是什么浏览器呢