[Vue.js] 點擊後滑到對應的錨點(hash)

在 Html 中，我們是可以透過 href="#aaa" 滑到對應的錨點，但如果不希望網址上出現 #(hash)，在 Vue 裡面可以這樣做：

在模板中，使用錨點鏈接指向要滾動到的位置：

<a href="#about" @click.prevent="scrollToAbout">前往關於</a>

在 Vue 元件中，定義 scrollToAbout 方法，使用 JavaScript 來滾動到指定位置：

methods: {
  scrollToAbout() {
    const aboutElement = document.querySelector('#about'); // 獲取要滾動到的元素
    if (aboutElement) {
      aboutElement.scrollIntoView({ behavior: 'smooth' }); // 使用平滑滾動到元素
    }
  }
}

上述程式碼中，scrollToAbout 方法首先使用 document.querySelector 獲取具有 id 為 "about" 的元素，然後使用 scrollIntoView 方法將頁面滾動到該元素的位置，使用 behavior: 'smooth' 選項來實現平滑滾動效果。

這種方法不需要 Vue Router，但需要一些額外的 JavaScript 代碼來處理滾動操作。請注意，滾動到的元素必須具有唯一的 id，以便通過 querySelector 找到它。