快捷導(dǎo)航

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

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

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

介紹

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

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

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

一、實(shí)現(xiàn)原理

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

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

http://www.fzitv.net/server/320459u0g.htm#heading-2

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

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

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

二、代碼(vue3 setup)

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

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

const route = useRoute();

// 監(jiān)聽路由變化，滾動(dòng)到對(duì)應(yīng)位置
watch(() => route.hash, (newVal, oldVal) => {
    let hash = window.location.hash;
    // hash 刪除第一個(gè)字符(當(dāng)前項(xiàng)目是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('滾動(dòng)到：', id, el)
            if(el) {
                // 平滑滾動(dòng)
                setTimeout(() => {
                    el.scrollIntoView({behavior: 'smooth'});
                }, 0);
            }
        })
    }
})

由于我的項(xiàng)目路由是哈希模式，于是便先清除一個(gè)#，接著便獲取到錨點(diǎn)id,然后獲取對(duì)應(yīng)的標(biāo)簽，最后進(jìn)行滾動(dòng) 為啥使用setTimeout呢？因?yàn)関ue的數(shù)據(jù)更新會(huì)有延遲的，代碼并不會(huì)立即執(zhí)行，因此使用定時(shí)器把這次滾動(dòng)推遲到下一個(gè)事件循環(huán)，確保成功觸發(fā)~

2、在對(duì)應(yīng)的子組件中，也就是滾動(dòng)容器組件，只需要給對(duì)應(yīng)的位置的標(biāo)簽添加 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)時(shí)根據(jù)url錨點(diǎn)(#xxx)實(shí)現(xiàn)頁面內(nèi)容定位的方法的文章就介紹到這了,更多相關(guān)vue根據(jù)url錨點(diǎn)定位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: