仅在 Vue.js 路由器的某些页面上滚动到页面顶部 - 在其他页面上保持滚动位置相同

Question

在主页上，我想在新的 Vue（过渡）视图中导航到我的页面之一。 用户在“关闭”这个页面时会回到上次滚动的位置。

这是通过将 Vue 原生 scrollBehavior 添加到 VueRouter 来实现的。

这就是我要去的地方：

const router = new VueRouter({
scrollBehavior: (to, from, savedPosition) => new Promise((resolve) => {
    const position = savedPosition || {};
    if (!savedPosition) {
      if (to.hash) {
        position.selector = to.hash;
      }
      if (to.matched.some((m) => m.meta.scrollToTop)) {
        position.x = 0;
        position.y = 0;
      }
    }
    router.app.$root.$once('triggerScroll', () => {
      router.app.$nextTick(() => resolve(position));
    });
  }),
routes, 
[]

然而！ 这意味着在主页上向下滚动将导致在新页面上的相同滚动位置结束。

我想防止这种情况发生。 新页面在y = 0处打开。 但！ 无需重置主页上的先前滚动位置。

所以当后退按钮被点击时，它会将用户返回到主页上点击的元素的滚动位置。

知道如何解决这个问题吗？

Answer 1

我有 - 而不是搞乱滚动行为 - 添加到我的主页视图组件以下：

export default {
[..]
  activated() {
    window.scrollTo(0, this.scrollposition);
    console.log("scrolling to this.scrollposition = " + this.scrollposition);
  },
  beforeRouteLeave(to, from, next) {
    this.scrollposition = window.pageYOffset;
    next();
  }
};

当您离开到另一个页面时，这会保存位置，并将滚动位置放回视图再次激活时的位置。

在案例研究页面本身，我添加了：

  activated() {
    window.scrollTo(0, 0);
  }

...为了在“打开”时将它们滚动到顶部。

似乎可以在所有现代浏览器中完美地跨平台工作。

对我来说已经足够好了。 希望其他人有一些用处。 :)