vue--记住页面的滚动高度，再次返回该页面时自动滚动到当前高度

1、获取页面滚动高度

document.documentElement.scrollTop

2、什么时候获取页面滚动高度

路由变化，离开当前页面时，可以在以下3个方法内获取页面滚动高度并记下来

beforeDestroydestroyedbeforeRouteLeave

3、保存页面滚动高度

经过第一步和第二步已经可以在离开该页面时获取页面滚动高度了，但是由于在此返回该页面时需要再次滚动到当前高度。因此，需要把整个高度给记下来。。。。。。那么记录到哪里呢？

我们知道可以在路由信息部分添加一个savePosition:{x:0,y:0}，再通过scrollBehavior滚动到之前设置的高度上，我们就把它保存到这里

代码如下

beforeRouteLeave(to, from, next) { this.$route.savedPosition = { x: 0, y: document.documentElement.scrollTop, }; next(); },

这里，是在beforeRouteLeave里获取页面滚动高度并保存的。

结果。。。。报错了。。。。 大致意思是，不能在js中给this.$route添加属性，对象是不可扩展的。

。。。。。。好吧，。。。。。不能新增属性，那就在已有属性上进行改动。。。。把它添加到meta下

beforeRouteLeave(to, from, next) { this.$route.meta.savedPosition = { x: 0, y: document.documentElement.scrollTop, }; next(); }

router/index.js 中scrollBehavior的写法。当要进入/backtop页面时，滚动到savePositon位置。

scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } else if (to.path === "/backtop" && to.meta && to.meta.savedPosition) { return to.meta.savedPosition } else { return { x: 0, y: 0 } } }

测试了下， 从/backtop跳转到/axios，再从/axios跳转到/index，最后从/index进入/backtop仍然可以自动滚动到之前记录的高度。

如果想要 从某个页面进入 /backtop时才自动滚动到记录的高度，就对to 和from 做一下判断。。。。

4、vuex

将页面滚动高度记录到vuex中。

大致过程和之前的是一样的，就不重复了。。

保存到vuex或者保存到this.$route.meta.savePosition中，当手动刷新该页面后，这个高度丢失。。。。。

这时，若想要在页面刷新后仍然可以自动滚动到之前的高度的话，。。。。就需要下面的方式了。。。。

5、sessionStorage localStorage

将页面滚动高度记录到 sessionStorage或者localStorage中 优点：即使刷新页面高度也不会丢失 缺点：可能会被用户误删。。。。。。 。。。 需要手动删除。。。。