在 Vue 3 中，可以通過(guò)多種方式實(shí)現(xiàn)錨點(diǎn)定位，包括使用原生的 JavaScript 方法和利用 Vue Router 提供的導(dǎo)航守衛(wèi)等。下面我會(huì)分別介紹這些方法。

1. 使用原生 JavaScript 方法：

在 Vue 3 中，你可以使用 window.location.hash 屬性來(lái)改變 URL 中的錨點(diǎn)，并通過(guò) JavaScript 方法將頁(yè)面滾動(dòng)到對(duì)應(yīng)的位置。下面是一個(gè)示例：

<template>
  <div>
    <ul>
      <li><a href="#section1" rel="external nofollow"  rel="external nofollow"  @click="scrollToAnchor">Section 1</a></li>
      <li><a href="#section2" rel="external nofollow"  rel="external nofollow"  @click="scrollToAnchor">Section 2</a></li>
      <li><a href="#section3" rel="external nofollow"  rel="external nofollow"  @click="scrollToAnchor">Section 3</a></li>
    </ul>

    <div id="section1">Section 1</div>
    <div id="section2">Section 2</div>
    <div id="section3">Section 3</div>
  </div>
</template>

<script>
export default {
  methods: {
    scrollToAnchor(event) {
      const href = event.target.getAttribute('href');
      window.location.hash = href;
      // 可以將滾動(dòng)位置定制為合適的位置
      // const targetElement = document.querySelector(href);
      // window.scrollTo({ top: targetElement.offsetTop, behavior: 'smooth' });
    },
  },
};
</script>

上面的示例中，我們使用了一個(gè)包含錨點(diǎn)鏈接的列表，并通過(guò) @click 事件將點(diǎn)擊的鏈接的 href 屬性值設(shè)置為 window.location.hash，從而改變 URL 的錨點(diǎn)。如果需要滾動(dòng)到對(duì)應(yīng)位置，可以通過(guò) JavaScript 方法獲取目標(biāo)元素，然后調(diào)用 window.scrollTo() 方法將頁(yè)面滾動(dòng)到目標(biāo)位置。

2. 使用 Vue Router 導(dǎo)航守衛(wèi)：

如果你在 Vue 3 項(xiàng)目中使用了 Vue Router，并且需要在導(dǎo)航時(shí)進(jìn)行錨點(diǎn)定位，你可以利用 Vue Router 提供的導(dǎo)航守衛(wèi)來(lái)實(shí)現(xiàn)。下面是一個(gè)示例：

<template>
  <div>
    <ul>
      <li><router-link to="#section1">Section 1</router-link></li>
      <li><router-link to="#section2">Section 2</router-link></li>
      <li><router-link to="#section3">Section 3</router-link></li>
    </ul>

    <div id="section1">Section 1</div>
    <div id="section2">Section 2</div>
    <div id="section3">Section 3</div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    router.beforeEach((to, from) => {
      if (to.hash) {
        const element = document.querySelector(to.hash);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' });
        }
      }
    });
  },
};
</script>

上面的示例中，我們使用了 組件來(lái)生成鏈接，通過(guò)傳遞 to 屬性設(shè)置錨點(diǎn)的值。然后，在導(dǎo)航守衛(wèi)的 beforeEach 鉤子中判斷是否存在錨點(diǎn)，并使用 scrollIntoView() 方法將頁(yè)面滾動(dòng)到對(duì)應(yīng)位置。

3.利用ref實(shí)現(xiàn)錨點(diǎn)定位

在 Vue 3 中，可以使用 ref 來(lái)實(shí)現(xiàn)錨點(diǎn)定位。ref 是一個(gè)響應(yīng)式引用對(duì)象，可以用來(lái)引用 DOM 元素或其他數(shù)據(jù)。通過(guò)將 ref 與 scrollIntoView() 方法結(jié)合使用，可以實(shí)現(xiàn)錨點(diǎn)定位。下面是一個(gè)示例：

<template>
  <div>
    <ul>
      <li><a @click="scrollToAnchor(section1Ref)">Section 1</a></li>
      <li><a @click="scrollToAnchor(section2Ref)">Section 2</a></li>
      <li><a @click="scrollToAnchor(section3Ref)">Section 3</a></li>
    </ul>

    <div ref="section1Ref" id="section1">Section 1</div>
    <div ref="section2Ref" id="section2">Section 2</div>
    <div ref="section3Ref" id="section3">Section 3</div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const section1Ref = ref(null);
    const section2Ref = ref(null);
    const section3Ref = ref(null);

    const scrollToAnchor = (ref) => {
      if (ref.value) {
        ref.value.scrollIntoView({ behavior: 'smooth' });
      }
    };

    return {
      section1Ref,
      section2Ref,
      section3Ref,
      scrollToAnchor,
    };
  },
};
</script>

上面的示例中，我們使用 ref 創(chuàng)建了三個(gè)引用對(duì)象 section1Ref、section2Ref 和 section3Ref，分別對(duì)應(yīng)三個(gè)錨點(diǎn)的 DOM 元素。然后，通過(guò)點(diǎn)擊鏈接時(shí)調(diào)用 scrollToAnchor() 方法，并傳遞對(duì)應(yīng)的引用對(duì)象，來(lái)實(shí)現(xiàn)滾動(dòng)到相應(yīng)的錨點(diǎn)位置。

在 scrollToAnchor() 方法中，我們首先判斷引用對(duì)象是否存在，然后調(diào)用 scrollIntoView() 方法將頁(yè)面滾動(dòng)到對(duì)應(yīng)的錨點(diǎn)位置。

通過(guò)使用 ref 來(lái)實(shí)現(xiàn)錨點(diǎn)定位，可以更加方便地操作 DOM 元素，并實(shí)現(xiàn)靈活的錨點(diǎn)定位效果。

4.利用a標(biāo)簽實(shí)現(xiàn)錨點(diǎn)定位

使用 < a > 標(biāo)簽實(shí)現(xiàn)錨點(diǎn)定位是一種常見且簡(jiǎn)單的方法。你可以在 < a > 標(biāo)簽的 href 屬性中設(shè)置錨點(diǎn)的 ID，然后通過(guò)點(diǎn)擊鏈接來(lái)實(shí)現(xiàn)頁(yè)面滾動(dòng)到對(duì)應(yīng)的錨點(diǎn)位置。下面是一個(gè)示例：
在上面的示例中，我們使用 < a > 標(biāo)簽來(lái)生成鏈接，并在 href 屬性中設(shè)置了對(duì)應(yīng)的錨點(diǎn) ID。當(dāng)用戶點(diǎn)擊鏈接時(shí)，瀏覽器會(huì)自動(dòng)滾動(dòng)到對(duì)應(yīng)的錨點(diǎn)位置。

<template>
  <div>
    <ul>
      <li><a href="#section1" rel="external nofollow"  rel="external nofollow"  class="section1">Section 1</a></li>
      <li><a href="#section2" rel="external nofollow"  rel="external nofollow"  class="section2">Section 2</a></li>
      <li><a href="#section3" rel="external nofollow"  rel="external nofollow"  class="section3">Section 3</a></li>
    </ul>

    <div id="section1">Section 1</div>
    <div id="section2">Section 2</div>
    <div id="section3">Section 3</div>
  </div>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
const insertLink = val => {
  let a = document.createElement("a");
  let href = val;
  a.setAttribute("href", href);
  a.setAttribute("target", "_blank");
  a.setAttribute("id", "startTelMedicine");
  a.onclick = function () {
    //關(guān)閉窗口的方法
    window.opener = null;
    window.open("", "_self", "");
    window.close();
  };
  // 防止反復(fù)添加
  if (document.getElementById("startTelMedicine")) {
    document.body.removeChild(document.getElementById("startTelMedicine"));
  }
  document.body.appendChild(a);
  a.click();
};
$('a').on('click', function () {
    //insertLink(document.querySelector("a").getAttribute("href"));
    insertLink("#" + event.target.className);
});

</script>

種方法非常簡(jiǎn)單，適用于基本的錨點(diǎn)定位需求。但需要注意的是，如果你的 Vue 3 項(xiàng)目使用了 Vue Router，并且使用了 router-link 組件來(lái)生成鏈接，那么應(yīng)該使用 to 屬性來(lái)設(shè)置錨點(diǎn)的值，而不是使用 < a > 標(biāo)簽的 href 屬性。這樣可以確保在使用 Vue Router 進(jìn)行導(dǎo)航時(shí)，也能夠正確地進(jìn)行錨點(diǎn)定位。

無(wú)論選擇哪種方式實(shí)現(xiàn)錨點(diǎn)定位，都可以根據(jù)具體的需求和場(chǎng)景來(lái)選擇合適的方法。

不同方法的優(yōu)缺點(diǎn)：

• 使用 ref 實(shí)現(xiàn)錨點(diǎn)定位：
  優(yōu)點(diǎn)：
  可以更加靈活地操作 DOM 元素。
  可以在 JavaScript 中對(duì)滾動(dòng)行為進(jìn)行更多的自定義設(shè)置。
  缺點(diǎn)：
  需要手動(dòng)創(chuàng)建和管理 ref 引用對(duì)象。
• 使用 < a > 標(biāo)簽實(shí)現(xiàn)錨點(diǎn)定位：
  優(yōu)點(diǎn)：
  簡(jiǎn)單直觀，不需要額外的 JavaScript 代碼。
  瀏覽器會(huì)自動(dòng)處理滾動(dòng)行為。
  缺點(diǎn)：
  對(duì)滾動(dòng)行為的自定義能力有限。(scroll-behavior: smooth)
  需要在 href 或 to 屬性中設(shè)置錨點(diǎn)的值。
  綜上所述，使用 ref 實(shí)現(xiàn)錨點(diǎn)定位可以提供更多的靈活性和自定義能力，適用于需要更復(fù)雜滾動(dòng)行為或?qū)?DOM 元素進(jìn)行其他操作的場(chǎng)景。而使用 < a > 標(biāo)簽實(shí)現(xiàn)錨點(diǎn)定位則更加簡(jiǎn)單直觀，適用于基本的錨點(diǎn)定位需求。

使用原生 JavaScript 方法實(shí)現(xiàn)錨點(diǎn)定位：
優(yōu)點(diǎn)：

簡(jiǎn)單直接：使用原生 JavaScript 方法可以直接操作 DOM 元素，不需要額外的依賴或庫(kù)。
靈活性高：可以自定義滾動(dòng)行為、動(dòng)畫效果等，根據(jù)需求進(jìn)行定制。
缺點(diǎn)：

需要手動(dòng)編寫和管理 JavaScript 代碼，相對(duì)于其他方法可能需要更多的工作量。
兼容性問(wèn)題：不同瀏覽器對(duì)于一些滾動(dòng)行為的實(shí)現(xiàn)可能有差異，需要進(jìn)行兼容性處理。
可維護(hù)性差：如果頁(yè)面中有大量的錨點(diǎn)定位，或者需要頻繁修改和維護(hù)，可能會(huì)導(dǎo)致代碼復(fù)雜和難以維護(hù)。
綜上所述，使用原生 JavaScript 方法實(shí)現(xiàn)錨點(diǎn)定位可以提供更高的靈活性和自定義能力，但需要更多的編碼工作，并且需要注意兼容性和可維護(hù)性的問(wèn)題。對(duì)于簡(jiǎn)單的錨點(diǎn)定位需求，使用原生 JavaScript 方法可能會(huì)顯得繁瑣，可以考慮使用其他簡(jiǎn)化的方法。

使用 Vue Router 導(dǎo)航守衛(wèi)：
優(yōu)點(diǎn)：

簡(jiǎn)化導(dǎo)航邏輯：導(dǎo)航守衛(wèi)可以幫助你在路由跳轉(zhuǎn)之前、之后或者在路由更新時(shí)執(zhí)行相應(yīng)的邏輯，從而簡(jiǎn)化導(dǎo)航的處理。
統(tǒng)一管理導(dǎo)航邏輯：通過(guò)導(dǎo)航守衛(wèi)，你可以將導(dǎo)航邏輯集中在一個(gè)地方進(jìn)行管理，提高代碼的可維護(hù)性和可讀性。
可以進(jìn)行權(quán)限控制：導(dǎo)航守衛(wèi)可以用來(lái)進(jìn)行權(quán)限驗(yàn)證，例如在用戶未登錄時(shí)攔截某些頁(yè)面的訪問(wèn)。
缺點(diǎn)：

需要學(xué)習(xí)和理解導(dǎo)航守衛(wèi)的概念和使用方法，對(duì)于初學(xué)者可能需要一定的學(xué)習(xí)成本。
需要手動(dòng)編寫和管理導(dǎo)航守衛(wèi)的邏輯，可能會(huì)增加代碼量和復(fù)雜度。
導(dǎo)航守衛(wèi)只能在前端進(jìn)行驗(yàn)證，不能完全保證數(shù)據(jù)的安全性，后端仍然需要進(jìn)行相應(yīng)的驗(yàn)證和控制。
綜上所述，使用 Vue Router 導(dǎo)航守衛(wèi)可以簡(jiǎn)化導(dǎo)航邏輯、統(tǒng)一管理導(dǎo)航邏輯和進(jìn)行權(quán)限控制，但需要學(xué)習(xí)和理解相關(guān)概念，并且需要手動(dòng)編寫和管理導(dǎo)航守衛(wèi)的邏輯。根據(jù)具體的需求和項(xiàng)目的規(guī)模，可以權(quán)衡使用導(dǎo)航守衛(wèi)的優(yōu)缺點(diǎn)來(lái)決定是否使用。

到此這篇關(guān)于vue3錨點(diǎn)定位多種方法詳解的文章就介紹到這了,更多相關(guān)vue3錨點(diǎn)定位多種方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論