How to use Vue Router to implement page scrolling behavior control?

How to use Vue Router to implement page scrolling behavior control?

When using Vue Router for single-page application development, we often need to control the page scrolling behavior to achieve a smoother user experience. Vue Router provides a simple and flexible way to control page scrolling behavior. This article will introduce how to use Vue Router to control page scrolling behavior, and attach code examples for reference.

Vue Router's scrolling behavior control is implemented through the scrollBehavior function. When creating a Vue Router instance, we can pass a custom scrollBehavior function as a parameter. This function receives three parameters: to represents the route that is about to enter, from represents the route that is about to leave, savedPosition represents the last scrolling position.

The following is a simple sample code:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  // 路由配置
]

const router = new VueRouter({
  routes,
  scrollBehavior (to, from, savedPosition) {
    // 控制滚动行为的逻辑
  }
})

Next, we can write our own control logic in the scrollBehavior function according to actual needs. The following are several common scrolling behavior control methods:

1. Scroll to the specified anchor point position

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

When the route jumps, if the target route has an anchor point (i.e. If the URL contains an identifier followed by #), the page will scroll to the location of the corresponding anchor.

2. Scroll to the last location

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  }
}

If the user jumps from one route to another, and then returns to the original route, the page will scroll to the top The location left.

3. Scroll to the top of the page

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

The page will scroll to the top position every time the route jumps.

4. Customized scrolling behavior logic

scrollBehavior (to, from, savedPosition) {
  // 编写自己的滚动行为逻辑
}

The above are just some common scrolling behavior control methods. In actual applications, more complex logic may need to be written according to specific needs.

In addition to controlling scrolling behavior in the scrollBehavior function, we can also control scrolling behavior through global navigation guards. For example, in the beforeEach navigation guard, we can control the scrolling behavior through the window.scrollTo method.

router.beforeEach((to, from, next) => {
  // 控制滚动行为的逻辑
  window.scrollTo(0, 0)
  next()
})

Through the above methods, we can easily control the page scrolling behavior in Vue Router. Choose the corresponding control method according to actual needs, and customize it appropriately according to your own project. Hope this article helps you!

The above is the detailed content of How to use Vue Router to implement page scrolling behavior control?. For more information, please follow other related articles on the PHP Chinese website!