vue3錨點定位多種方法詳解

更新時間：2024年01月21日 09:25:34 作者：趙嘯林

這篇文章主要介紹了vue3的錨點定位多種方法,需要的朋友可以參考下

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

1. 使用原生 JavaScript 方法：

在 Vue 3 中，你可以使用 window.location.hash 屬性來改變 URL 中的錨點，并通過 JavaScript 方法將頁面滾動到對應的位置。下面是一個示例：

<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;
      // 可以將滾動位置定制為合適的位置
      // const targetElement = document.querySelector(href);
      // window.scrollTo({ top: targetElement.offsetTop, behavior: 'smooth' });
    },
  },
};
</script>

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

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

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

<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>

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

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

在 Vue 3 中，可以使用 ref 來實現(xiàn)錨點定位。ref 是一個響應式引用對象，可以用來引用 DOM 元素或其他數據。通過將 ref 與 scrollIntoView() 方法結合使用，可以實現(xiàn)錨點定位。下面是一個示例：

<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)建了三個引用對象 section1Ref、section2Ref 和 section3Ref，分別對應三個錨點的 DOM 元素。然后，通過點擊鏈接時調用 scrollToAnchor() 方法，并傳遞對應的引用對象，來實現(xiàn)滾動到相應的錨點位置。

在 scrollToAnchor() 方法中，我們首先判斷引用對象是否存在，然后調用 scrollIntoView() 方法將頁面滾動到對應的錨點位置。

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

4.利用a標簽實現(xiàn)錨點定位

使用 < a > 標簽實現(xiàn)錨點定位是一種常見且簡單的方法。你可以在 < a > 標簽的 href 屬性中設置錨點的 ID，然后通過點擊鏈接來實現(xiàn)頁面滾動到對應的錨點位置。下面是一個示例：
在上面的示例中，我們使用 < a > 標簽來生成鏈接，并在 href 屬性中設置了對應的錨點 ID。當用戶點擊鏈接時，瀏覽器會自動滾動到對應的錨點位置。

<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 () {
    //關閉窗口的方法
    window.opener = null;
    window.open("", "_self", "");
    window.close();
  };
  // 防止反復添加
  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>

種方法非常簡單，適用于基本的錨點定位需求。但需要注意的是，如果你的 Vue 3 項目使用了 Vue Router，并且使用了 router-link 組件來生成鏈接，那么應該使用 to 屬性來設置錨點的值，而不是使用 < a > 標簽的 href 屬性。這樣可以確保在使用 Vue Router 進行導航時，也能夠正確地進行錨點定位。

無論選擇哪種方式實現(xiàn)錨點定位，都可以根據具體的需求和場景來選擇合適的方法。

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

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

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

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

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

使用 Vue Router 導航守衛(wèi)：
優(yōu)點：

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

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

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

您可能感興趣的文章: