[筆記] Nuxt3 使用錨點導航導致 router meta 資料遺失的替代方案 @地瓜大的飛翔旅程

章節連結

內容

Nuxt3 若使用錨點要跳到頁面的某個區塊時，是會觸發 vue-router 進行資料更新的。若想要保有既有的 meta 資料，又能有導航效果，這邊筆記下實現方式。

內容

由於 Nuxt3 會攔截所有的 href，並做出對應的 meta 等值更新。因此就改用 JavaScript 操作 DOM，搭配 scrollIntoView 方法就可以達成。

export const scrollTo = (hashPath: string = '') => {
  const el = document.querySelector(hashPath)
  if (el) {
    el.scrollIntoView({ behavior: 'smooth' })
  }
}

export const scrollTo = (hashPath: string = '') => {

const el = document.querySelector(hashPath)

if (el) {

el.scrollIntoView({ behavior: 'smooth' })

}

按讚加入粉絲團

內容

延伸閱讀