关于浏览器返回上个界面时回到上到浏览的位置

总结一下能够记住的问题。第一个是返回上个界面记住上次浏览的位置,第二个是滚动加载更多的分页吧。

记住上次浏览的位置

嘛,遇见问题第一件事干嘛。百度啊,看思路啊。思想比较明确,尤其是vue,貌似生来就与vuex判定在一起了嘛。大概思路就是离开页面时保存位置,回到界面时利用滚动到那个位置就行了。网上的回答是这样的。


关于浏览器返回上个界面时回到上到浏览的位置_第1张图片

       迫不及待试了一下。嗯,可是beforeRouteLeave函数不调用啊喂,这怎么办,又是一顿百度,无果,无奈改用beforeDestory函数,猜测原因可能是我写这个函数的组件是路由组件的子组件,待验证。

      再试一下,感觉还是很奇怪啊,就是位置大概在超过一个屏幕高度后就不准了有木有,一顿console.log调试。(目前只会这样调试。见笑了)发现离开时记录的位置根本不准确,嗯,记录方式大概就是vuex中设置一个position的state,离开的时候把window.scrollY保存进去。一顿各种测试,再次改变做法,不在组件钩子中记录,改在路由事件中记录历史位置,解决位置坐标记录不准的问题。(原因再次猜测:我写那个beforeDestory函数所在的组件里面有一个循环生成很多子组件,然后再调用beforeDestory时前面的子组件已经销毁,所以获取到的window.scrollY值不对且很小,技术不够,暂时找不到验证方法)

    位置有了,剩下的就是返回时window.scrollTo到指定位置,发现依然存在问题,就是位置不准且滚动位置很奇怪。这个问题很好猜测,大概就是界面还没渲染出来就调用了window.scrollTo方法这样的,因为我在created钩子中写过获取获取的动作,所以滚动动作就加在数据成功后,遂解决。

嘛,其实做的时候遇见过还有一些问题,比如刚开始我的做法的vue-router中指定为history模式,并设置scrollBehavior函数,大概是这样

scrollBehavior (to,from, savedPosition) {

    if(savedPosition) {

        returnsavedPosition

    }else{return{ x:0, y:0}

   }

}

但是位置返回不准确,应该是我在created中获取数据后有刷新dom操作导致的。

你可能感兴趣的:(关于浏览器返回上个界面时回到上到浏览的位置)