本文介绍在Vue项目中，通过监听URL中的锚点（#xxx）实现页面跳转后自动滚动至指定内容区域的方法。针对子组件滚动区域无法自动定位的问题，提供了基于watch监听路由变化并结合setTimeout延迟执行的代码示例，确保DOM更新后平滑滚动到目标元素。
介绍
在进行前端页面跳转开发时，需求要求跳转至目标页面后，自动将对应部分的内容滚动至顶部显示。
起初考虑利用锚点<a href="#xxid">机制来处理，但发现直接实现存在困难。
经过研究，找到了一种较为简便的替代方案。
一、实现原理
为实现该跳转逻辑，首先将定位锚点信息附加到URL中。
许多网站采用此方式，例如掘金网站：
https://www.jb51.net/server/320459u0g.htm#heading-2
上述链接中，#符号后拼接的内容即为定位锚点，只需为页面中对应位置的标签添加id属性即可。
然而，本项目中需要定位的区域位于子组件的滚动容器内，导致标准的自动滚动效果无法触发，具体原因尚不明确。
因此，采用watch监听机制，检测URL中是否包含锚点（即#后的字符串）。若存在，则根据该字符串作为id获取对应DOM元素，并执行滚动操作。
二、代码(vue3 setup)
1、在需要跳转页面的父组件中进行监听，建议置于页面框架组件中，以确保监听持续生效：
import { watch, nextTick } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
// 监听路由变化，滚动到对应位置
watch(() => route.hash, (newVal, oldVal) => {
let hash = window.location.hash;
// hash 删除第一个字符(当前项目是hsah模式)
hash = hash.slice(1);
if(hash.indexOf('#') != -1) {
nextTick(() => {
let id = hash.split('#')[1];
id = decodeURIComponent(id);
let el = document.getElementById(id);
console.log('滚动到：', id, el)
if(el) {
// 平滑滚动
setTimeout(() => {
el.scrollIntoView({behavior: 'smooth'});
}, 0);
}
})
}
})
由于项目采用哈希模式路由，需先去除#符号，随后获取锚点id，定位对应标签并执行滚动。使用setTimeout的原因是Vue数据更新存在延迟，代码不会立即执行，通过定时器将滚动操作推迟至下一个事件循环，以确保成功触发。
2、在对应的子组件（即滚动容器组件）中，只需为需要定位的位置标签添加id属性。
3、使用方法，通过router进行跳转：
import { useRouter } from 'vue-router';
const router = useRouter()
// 跳转
router.push({ path: '/xxx/xxxxx', hash: '#位置'})
三、演示：
四、结束
到此这篇关于vue跳转时根据url锚点(#xxx)实现页面内容定位的方法的文章就介绍到这了,更多相关vue根据url锚点定位内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！