Vue路由器转到新页面的顶部

Question

现在，在我的Vue应用程序中，当我单击<router-link>时，它会转到页面，但会转到与上一页相同的滚动级别(因为链接只是替换组件(。

我想知道是否有一个vue-router功能可以使页面达到顶部，或者我需要使用其他JS编程来实现这一点。

非常感谢你的帮助。

Answer 1

Vue路由器有几个保护和函数，在路由更改之前、期间和之后都会调用。在您的情况下，有一个专用函数可以让您覆盖滚动的默认行为，名为scrollBehavior。它是用两个路由对象和一个包含x和y坐标的对象调用的，可能还有一个选择器，用于选择页面上的元素作为偏移。

要使用它，请更改定义路由器的代码，并添加scrollBehavior函数：

// src/router.js
const router = new VueRouter({
// What you previously had here, such as routes
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 };
}
});
export default router;