快捷導航

vue跳轉(zhuǎn)時根據(jù)url錨點(#xxx)實現(xiàn)頁面內(nèi)容定位的方法

更新時間：2024年04月30日 08:44:43 作者：前端炒粉仔

本前端仔在做頁面跳轉(zhuǎn)的時候,被要求跳轉(zhuǎn)到頁面時候,把對應(yīng)部分的內(nèi)容自動滾動到頂部,我一開始想到的就是根據(jù)錨點<a href="#xxid">進行處理,但是發(fā)現(xiàn)不太好實現(xiàn),于是便自己研究了一個比較取巧的方法,需要的朋友可以參考下

介紹

本前端仔在做頁面跳轉(zhuǎn)的時候，被要求跳轉(zhuǎn)到頁面時候，把對應(yīng)部分的內(nèi)容自動滾動到頂部~

我一開始想到的就是根據(jù)錨點<a href="#xxid">進行處理，但是發(fā)現(xiàn)不太好實現(xiàn)~

于是便自己研究了一個比較取巧的方法

一、實現(xiàn)原理

為了能夠方便處理這個跳轉(zhuǎn)邏輯，我首先就想要把定位的錨點放到 url 上面，

事實上很多網(wǎng)站都是這樣做的，比如掘金就是這樣做的:

http://chabaoo.cn/server/320459u0g.htm#heading-2

上面的鏈接中 # 后面拼接的就是定位的錨點，這種就是給頁面對應(yīng)位置的標簽添加 id 即可

但是我的項目要定位的地方在一個子組件的滾動區(qū)域內(nèi)，觸發(fā)不了這個自動滾動效果，不知道為啥~

于是我便使用 watch 進行監(jiān)聽，如果發(fā)現(xiàn)url中存在錨點，也就是#拼接的字符串，就根據(jù)這個字符串為id獲取對應(yīng)的元素，然后將其進行滾動~

二、代碼(vue3 setup)

1、首先在需要跳轉(zhuǎn)的頁面的父組件上進行監(jiān)聽，最好是頁面框架組件，這樣這個監(jiān)聽效果會一直存在:

import { watch, nextTick } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

// 監(jiān)聽路由變化，滾動到對應(yīng)位置
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,然后獲取對應(yīng)的標簽，最后進行滾動為啥使用setTimeout呢？因為vue的數(shù)據(jù)更新會有延遲的，代碼并不會立即執(zhí)行，因此使用定時器把這次滾動推遲到下一個事件循環(huán)，確保成功觸發(fā)~

2、在對應(yīng)的子組件中，也就是滾動容器組件，只需要給對應(yīng)的位置的標簽添加 id 即可

3、使用方法，router 跳轉(zhuǎn)：

import { useRouter } from 'vue-router';
const router = useRouter()

// 跳轉(zhuǎn)
router.push({ path: '/xxx/xxxxx', hash: '#位置'})

三、演示：

四、結(jié)束

到此這篇關(guān)于vue跳轉(zhuǎn)時根據(jù)url錨點(#xxx)實現(xiàn)頁面內(nèi)容定位的方法的文章就介紹到這了,更多相關(guān)vue根據(jù)url錨點定位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: