vue.js - 仅在加载组件后才在 vue-router 中滚动页面

Question

根据 vue-router 文档(https://router.vuejs.org/guide/advanced/scroll-behavior.html#async-scrolling)，您可以执行“异步滚动”。我有一个单页应用程序，其中页面的高度逐页变化。向后导航时，我想将页面滚动到用户单击链接的相同位置。

现在，当返回时页面的组件没有完全加载并且页面的整体高度不够长。滚动到 savedPosition 只会在组件加载之前到达页面底部。

我可以在 nuxt.config.js 中做到这一点

 router: {
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition)
      {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(savedPosition)
          }, 300)
        })
      }

这将等待 300 毫秒，大约在页面高度确定后，然后才向下滚动。但这不是最优的。如果组件的加载时间更长怎么办？

只有在页面上的组件加载后，你如何实现 vue-router 滚动？

我可以在vue-router scrollBehavior中监听页面中的事件吗？我能以某种方式等待 Vue 生命周期 Hook 触发滚动吗？我可以获得有关页面高度更改的触发器吗？

Answer 1

使用 ResizeObserver API，您可以在元素高度更改时添加事件监听器:

// create an Observer instance to listen to height changes on an object
const resizeObserver = new ResizeObserver(entries => {
    // Check if the height is enough to scroll to that point
    if(entries[0].target.clientHeight >= savedPosition.top + screen.height) {
        // Then resolve to trigger the scroll and disconnect the observer
        resolve(savedPosition);
        resizeObserver.disconnect();
    }
});
// start observing a DOM node
resizeObserver.observe(document.body);

这是一个完整的例子:

scrollBehavior(to, from, savedPosition) {
    return new Promise((resolve, reject) => {
        if(savedPosition) {
            // create an Observer instance
            const resizeObserver = new ResizeObserver(entries => {
                if(entries[0].target.clientHeight >= savedPosition.top + screen.height) {
                    resolve(savedPosition);
                    resizeObserver.disconnect();
                }
            });
            
            // start observing a DOM node
            resizeObserver.observe(document.body);
        } else {
            resolve({ top: 0 });
        }
    });
}