仅在我的 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);
  }

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

似乎可以在所有现代浏览器中完美运行、跨平台。

对我来说已经足够了。希望其他人对此有所帮助。 :)