vue 的路由互相切换时怎么保持当前页面的滚动的距离?

子路由是长列表,滚动某到一个位置后,再进入其他页面,然后再点击进入页面,滚动距离消失,重新回到了顶部:
vue 的路由互相切换时怎么保持当前页面的滚动的距离?
首页 ,活动,我的,分别为子路由的三个页面,如果首页是新闻,刷到十几条数据后,去了我的页面,然后再返回首页新闻列表,数据回到了顶部,是不是很崩溃,
我的解决:
vue 的路由互相切换时怎么保持当前页面的滚动的距离?
箭头指的分别记录初始位置,也就是 0,在页面内,我们上划看新闻的时候,要实时记录滚动距离,如下图所示:
vue 的路由互相切换时怎么保持当前页面的滚动的距离?
activated 可以简单理解为 设置keep-alive的缓存组件进入页面触发。此时的this.route,访deactivatedkeepalivethis.route,可以访问到进入页面的路由数据 deactivated 可以简单理解为 设置keep-alive的缓存组件离开页面触发。 此时的this.route,访问到了离开的下一页面路由数据,
所以我就在activated里保存了 这个页面的路由数据,在离开时赋值滚动距离
此时meat里的scrlooPosition 的y值就保存了,我们的滚动距离,
这几步操作,我们可以用混入(mixins)保存,哪个页面需要用到保存距离,哪个页面引用就可以啦!
vue 的路由互相切换时怎么保持当前页面的滚动的距离?
数据都拿到了,接下来重点来了:
vue 的路由互相切换时怎么保持当前页面的滚动的距离?
scrollBehavion :他的return就是期望滚动的位置,此时我们把距离好的位置给他,就大功告成。
有问题随时联系我哦:
vue 的路由互相切换时怎么保持当前页面的滚动的距离?