vue跳转时根据url锚点(#xxx)实现页面内容定位的方法
更新时间：2024年04月30日 08:44:43 作者：前端炒粉仔
本前端仔在做页面跳转的时候,被要求跳转到页面时候,把对应部分的内容自动滚动到顶部,我一开始想到的就是根据锚点<a href="#xxid">进行处理,但是发现不太好实现,于是便自己研究了一个比较取巧的方法,需要的朋友可以参考下
介绍
本前端仔在做页面跳转的时候，被要求跳转到页面时候，把对应部分的内容自动滚动到顶部~
我一开始想到的就是根据锚点<a href="#xxid">进行处理，但是发现不太好实现~
于是便自己研究了一个比较取巧的方法
一、实现原理
为了能够方便处理这个跳转逻辑，我首先就想要把定位的锚点放到 url 上面，
事实上很多网站都是这样做的，比如掘金就是这样做的:
https://www.jb51.net/server/320459u0g.htm#heading-2
上面的链接中 # 后面拼接的就是定位的锚点，这种就是给页面对应位置的标签添加 id 即可
但是我的项目要定位的地方在一个子组件的滚动区域内，触发不了这个自动滚动效果，不知道为啥~
于是我便使用 watch 进行监听，如果发现url中存在锚点，也就是#拼接的字符串，就根据这个字符串为id获取对应的元素，然后将其进行滚动~
二、代码(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锚点定位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了解决echarts中横坐标值显示不全(自动隐藏)问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue定义全局变量和全局方法的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
在做开发中都会遇到的需求,每个用户的权限是不一样的,那他可以访问的页面(路由)可以操作的菜单选项是不一样的,如果由后端控制,我们前端需要去实现动态路由,动态渲染侧边菜单栏,这篇文章主要给大家介绍了关于vue3实现动态侧边菜单栏的几种方式,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了如何设置Vue全局公共方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了通过vue提供的keep-alive减少对服务器的请求次数,文中给大家补充介绍了vue路由开启keep-alive时的注意点，需要的朋友可以参考下2018-04-04
这篇文章主要介绍了在项目vue中使用echarts的操作步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍利用Vue3 创建Vue CLI 项目，下面文章内容附有官方文档链接，安装过程，需要的可以参考一下2021-10-10
这篇文章主要介绍了vuex如何修改状态state的方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
本文通过实例代码给大家分享el-select 点击按钮滚动到选择框顶部效果,主要代码是在visibleChange在这个popper里面找到.el-select-dropdown__list,感兴趣的朋友跟随小编一起看看吧2024-05-05
vue任意关系组件通信与跨组件监听状态vue-communication
这篇文章主要介绍了vue任意关系组件通信与跨组件监听状态vue-communication，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
最新评论