javascript - vue 路由器强制 popstate

Question

我在页面中间有一些链接，可以使用嵌套路由器更改其下方 Pane 中的内容。我与此问题相关的路线如下所示:

const router = {
  mode: 'history',
  routes: [
    {
      path: '/parent',
      name: 'ParentComponent',
      component: ParentComponent,
      children: [
        {
          path: 'child1',
          name: 'Child1',
          component: Child1,
        },
        {
          path: 'child2',
          name: 'Child2',
          component: Child2,
        },
      ],
    },
  ],
}

问题是内容在页面中向下滚动，当我点击子路径的链接时，它会跳到顶部。所以我尝试添加 scrollBehavior 来保持滚动位置，如下所示:

router.scrollBehavior = (to, from, savedPosition) => {
  console.log('savedPosition: ', savedPosition);
  if (savedPosition) {
    return savedPosition;
  }
  return { x: 0, y: 0 };
}

这个console.log总是为我输出null。在阅读docs时，它表示 savedPosition 仅当它是 popstate 导航时才具有值。

有没有办法强制我创建的链接执行 popstate 导航，或者是否有其他方法可以用来在单击链接时保留滚动位置？

Answer 1

我最近做了这样的事情

scrollBehavior (to, from) {
  if (to.path === from.path && to.query && to.query.page === from.query.page) {
    return false
  } else {
    return { x: 0, y: 0 }
  }
},

这可能会让你走上正轨