vue.js - vue-router 如何同时使用scrollBehavior保持后退时滚动位置和transition过渡效果？

问题描述

问 题

我尝试同时使用scrollBehavior和transition过渡效果，结果只有当页面都带有滚动条时，后退才能保持位置，在官方github的issue上找到了这一条https://github.com/vuejs/vue-...

Hooking into transitions involves too many intricacies and depends on custom transition implementations, so vue-router is not going to support that as a built-in. It's possible to implement your own transition component for that purpose though.

那么如何自定义过渡组件呢？
求教一个较简单的实现方法。

解决方案

没有看到答案，我目前只能换了一个思路，不自定义过度组件，而是结合scrollBehavior自己实现保持后退时滚动位置。
大概是这样
我猜测，之所以加了transition后无法实现保持后退时滚动位置，是因为在过度时，页面还没有渲染出来，此时vue-router设置类似window.scrollTo(0, yPosition);但页面实际上没有滚动条。
设置了scrollBehavior方法的话，vue-router会在切换时在sessionStorage中插入当前页面的history.state.key对应的xy轴滚动条位置。
我先是尝试在根组件app.vue中判断操作是否后退，在this.$nextTick中取出sessionStorage中的y轴高度执行window.scrollTo(0, yPosition);结果仍然无效。
然后尝试在需要保持滚动条的页面组件的mounted中进行上述操作，实现了效果。

这篇关于vue.js - vue-router 如何同时使用scrollBehavior保持后退时滚动位置和transition过渡效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！