vue跳转时根据url锚点(#xxx)实现页面内容定位的方法

来自:网络
时间:2024-06-10
阅读:

介绍

本前端仔在做页面跳转的时候,被要求跳转到页面时候,把对应部分的内容自动滚动到顶部~

我一开始想到的就是根据锚点<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)实现页面内容定位的方法

四、结束

返回顶部
顶部