在 Vue.js 单页面应用（SPA）中，页面跳转通常使用路由实现。但是，有时候我们需要在同一个页面中实现跳转到页面内的某个锚点位置，这时候就需要使用页面锚点定位跳转。
本文将介绍如何使用 Vue.js 实现页面锚点定位跳转，并提供示例代码，希望对您有所帮助。
页面锚点定位跳转的原理
页面锚点定位跳转的原理很简单，就是通过 URL 中的锚点（#）来定位页面中的某个元素，然后将页面滚动到该元素所在的位置。
例如，我们要实现跳转到页面中的某个标题位置，可以在 URL 中添加锚点，如下所示：
http://example.com/#my-title
然后，在页面中添加一个 id 为 "my-title" 的元素，当用户访问上述 URL 时，页面会自动滚动到该元素所在的位置。
在 Vue.js 中实现页面锚点定位跳转
在 Vue.js 中实现页面锚点定位跳转也很简单，只需要在路由配置中添加一个动态路由参数，然后在页面中根据该参数来定位到相应的元素即可。
假设我们要实现跳转到页面中的某个标题位置，可以将路由配置修改为如下所示：
// javascriptcn.com 代码示例
const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/:id',
component: Home
}
]
})在上述路由配置中，我们添加了一个动态路由参数 ":id"，然后将其指向 Home 组件。
接下来，在 Home 组件中，我们可以通过 $route.params.id 获取到动态路由参数的值，然后使用 ref 属性来获取相应的元素，最后使用 scrollIntoView() 方法将页面滚动到该元素所在的位置。
示例代码如下：
// javascriptcn.com 代码示例
<template>
<div>
<h1 ref="title1">标题1</h1>
<p>正文1</p>
<h1 ref="title2">标题2</h1>
<p>正文2</p>
</div>
</template>
<script>
export default {
mounted() {
if (this.$route.params.id) {
const element = this.$refs[this.$route.params.id]
if (element) {
element.scrollIntoView()
}
}
}
}
</script>在上述代码中，我们在标题元素中添加了 ref 属性，然后在 mounted 钩子函数中获取动态路由参数的值，并根据该值使用 ref 属性获取相应的元素，最后使用 scrollIntoView() 方法将页面滚动到该元素所在的位置。
总结
通过本文的介绍，我们了解了页面锚点定位跳转的原理，并学习了如何在 Vue.js 中实现页面锚点定位跳转。希望本文对您有所帮助，如果您有任何疑问或建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656d6bdcd2f5e1655d5b06e3