Vue implements local jump

With the widespread application of Vue, we often need to implement local jump functions in single-page applications. This kind of jump mainly refers to the link jump within the page, such as realizing a "return to the top" function, or realizing the function of switching different content in a single-page application.

After some research, I found two more effective implementation methods, namely using anchor points and programming.

Using anchor points

Anchor point is an HTML syntax that can jump within the same page. The implementation principle is to add an id attribute to the specified element in the page, and then jump to the element within the page by adding an anchor point to the link.

It is also very simple to implement anchor point jump in Vue. First we need to add a unique id to the element we want to jump to, for example:

<div id="example">这里是文本内容</div>

Then we can jump by adding the corresponding anchor point to the link on the page:

<a href="#example">跳转到示例</a>

The code to implement anchor point jump in Vue is as follows:

this.$router.push({ path: '/', hash: '#example' })

Among them, $router is the routing object provided in Vue-Router, path: '/' means jumping to the current page, and hash: '#example' means jumping to the id of the specified element.

Achieved programmatically

In addition to using anchor points, we can also implement local jumps programmatically. This implementation method will be more flexible in some special scenarios.

Vue-Router provides many APIs to implement programmatic navigation. Among them, the most commonly used APIs are the $router.push method and the $router.replace method. Both methods can be used to implement page jumps, but their implementation methods are slightly different.

$router.push The method will add the URL of the current page to the browser's routing history and load a new page using the new URL, thereby achieving page jumps. The code is as follows:

this.$router.push('/path/to/destination')

The $router.replace method does not add a new record to the browser history, but directly replaces the current URL. The code is as follows:

this.$router.replace('/path/to/destination')

If we want to implement the local jump function, we can first obtain the position information of the target element that needs to be jumped, and then use $router.push or $router.replace method implements jump.

To give a practical example, in a single-page application, we can implement a "return to top" function. First, we need to get the position information of the target element by writing a function:

function getTargetPosition() {
  const target = document.querySelector('#target')
  if (!target) return null
  const targetRect = target.getBoundingClientRect()
  return {
    x: targetRect.left + window.pageXOffset,
    y: targetRect.top + window.pageYOffset
  }
}

Then, we can add a "return to top" button to the page. When the user clicks the button, a local jump can be achieved. Transfer:

<button @click="backToTop">返回顶部</button>

The corresponding Vue method is as follows:

methods: {
  backToTop() {
    const position = getTargetPosition()
    if (!position) return
    this.$router.push({ path: '/', query: { position } })
  }
}

In this method, we first obtain the position information of the target element, and then pass the $router.push method Implement the jump. Note that this is different from anchor point jump. In the $router.push method, we use the query attribute to pass the position information of the target element.

Finally, in the target page, we can obtain the passed location information through $route.query, so as to scroll the page to the specified position:

mounted() {
  const { position } = this.$route.query
  if (position) {
    window.scrollTo(position.x, position.y)
  }
}

In this way, we can implement the local jump function in single-page applications.

Summary

For local jumps in single-page applications, we can achieve it by using anchor points or programmatically. Among them, the anchor point method is simpler and more intuitive, but may have limitations in some scenarios. The programming method can more flexibly control the behavior of page jumps, but the corresponding implementation code requires more work.

The above is the detailed content of Vue implements local jump. For more information, please follow other related articles on the PHP Chinese website!