随着 vue 的广泛应用，我们常常需要在单页应用中实现局部跳转的功能。这种跳转主要是指页面内部的链接跳转，比如实现一个“返回顶部”的功能、或者在一个单页应用中实现切换不同的内容的功能等。
在经过一番研究之后，我发现了两种比较有效的实现方法，分别是使用锚点和通过编程方式实现。
使用锚点
锚点是一种 HTML 语法，其可以在同一个页面内部实现跳转。其实现原理是在页面中为指定元素添加一个 id 属性，然后通过在链接中添加锚点的方式，在页面内跳转到该元素。
在 Vue 中实现锚点跳转也非常简单。首先我们需要为所需要跳转的元素添加一个唯一的 id，例如：
<div id="example">这里是文本内容</div>
然后我们就可以通过在页面的链接中添加对应的锚点实现跳转：
立即学习“前端免费学习笔记（深入）”；
<a href="#example">跳转到示例</a>
在 Vue 中实现锚点跳转的代码如下：
this.$router.push({ path: '/', hash: '#example' })其中，$router 是 Vue-Router 中提供的路由对象，path: '/' 表示跳转到当前页面，而 hash: '#example' 则表示跳转到指定元素的 id。
通过编程方式实现
除了使用锚点之外，我们还可以通过编程的方式来实现局部跳转。这种实现方式在一些特殊场景下会更加灵活。
Vue-Router 提供了许多 API 来实现编程式导航。其中，最常用的 API 是 $router.push 方法和 $router.replace 方法。这两个方法都可以用来实现页面跳转，但其实现方式略有不同。
$router.push 方法会将当前页面的 URL 添加到浏览器的路由历史中，并使用新的 URL 加载新页面，从而实现页面跳转。其代码如下：
this.$router.push('/path/to/destination')而 $router.replace 方法则不会向浏览器历史中添加新的记录，而是直接替换当前的 URL。其代码如下：
this.$router.replace('/path/to/destination')如果我们要实现局部跳转的功能，我们可以先获取到需要跳转的目标元素的位置信息，然后再使用 $router.push 或者 $router.replace 方法实现跳转。
举一个实际的例子，在一个单页应用中，我们可以实现一个“返回顶部”的功能。首先，我们需要通过编写一个函数来获得目标元素的位置信息：
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
}
}然后，我们可以在页面中添加一个“返回顶部”的按钮，当用户点击按钮时，即可实现局部跳转：
<button @click="backToTop">返回顶部</button>
对应的 Vue 方法如下：
methods: {
backToTop() {
const position = getTargetPosition()
if (!position) return
this.$router.push({ path: '/', query: { position } })
}
}在这个方法中，我们先获取目标元素的位置信息，然后再通过 $router.push 方法实现跳转。注意到，这里不同于锚点跳转，在 $router.push 方法中，我们使用了 query 属性来传递目标元素的位置信息。
最后，在目标页面中，我们可以通过 $route.query 来获取到传递过来的位置信息，从而将页面滚动到指定位置：
mounted() {
const { position } = this.$route.query
if (position) {
window.scrollTo(position.x, position.y)
}
}通过这种方式，我们即可实现在单页应用中的局部跳转功能。
总结
对于单页应用中的局部跳转，我们可以通过使用锚点或者通过编程方式来实现。其中，锚点方式更加简单直观，但在一些场景下可能会存在限制。而编程方式能够更加灵活地控制页面跳转的行为，但相应的实现代码则需要更多的工作。
