In the Vue project, after jumping from a long page to another route, the position of the page remains the same as that of the previous page and does not return to the top. You just need to add the scrollBehavior method to the route configuration.

Router /index.js file:

export default new Router({ routes: [ { path: '/', name: 'Index', component: Index}], scrollBehavior (to, from, savedPosition) {Copy the code

The scrollBehavior method receives to and FROM routing objects. The third parameter savedPosition is available if and only if popState navigation (triggered by the browser’s forward/back buttons).

This method returns information about an object at the scroll position, which looks like this:

  • { x: number, y: number }

  • { selector: string, offset? : {x: number, y: number}} (offset is only supported in 2.6.0+)

Vue Router scroll behavior

Address: router.vuejs.org/zh/guide/ad…