Question

我在页面中间有一些链接，这些链接使用嵌套路由器更改了其下方窗格中的内容。我担心这个问题的路线看起来像这样：

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 }
  }
},

这可能会让您走上正轨

Answer 2

这就是链接的docs中所说的内容。

scrollBehavior函数接收路由对象的往返。第三个参数savePosition仅在以下情况下可用 popstate导航（由浏览器的后退/前进按钮触发）。

由于您是使用页面中间的链接触发导航的，因此它不是弹出状态导航。

正确的做法是不使用该函数的savedPosition版本，因为不会设置该位置。

Vue路由器强制弹出状态

2 个答案: