Vue Router 在新页面上到顶部

Question

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

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

非常感谢您的帮助。

Answer 1

Vue 路由器有几个守卫和函数，它们在路由更改之前、期间和之后被调用。在您的情况下，有一个专用函数允许您覆盖滚动的默认行为，名为 scrollBehavior. It is called with two route objects 和一个包含 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;

Vue Router 在新页面上到顶部

Vue Router go to top on new page

javascript

vue.js

vue-router