哈希锚在第一次点击时重新加载页面

Question

当我单击带有类似 href='#title' 的 href 的锚点时，我希望页面滚动到包含 id='title' 的元素。`

相反，它会重新加载页面，如果我第二次单击它，它就会起作用。我正在使用 vue-router，这是router.options：

import type { RouterOptions } from '@nuxt/schema'

export default <RouterOptions>{
  strict: true,
  scrollBehavior: function (to, _from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else if (to.hash) {
      return {
        el: to.hash,
      }
    } else {
      return {
        left: 0,
        top: 0,
      }
    }
  },
}

Answer 1

嘿，几周前我遇到了同样的问题。 这是我的解决方案：

import type { RouterConfig } from '@nuxt/schema'

// https://router.vuejs.org/api/#routeroptions
export default <RouterConfig>{
  scrollBehavior(to, from, savedPosition) {
    const nuxtApp = useNuxtApp()

    // If history back
    if (savedPosition) {
      // Handle Suspense resolution
      return new Promise((resolve) => {
        nuxtApp.hooks.hookOnce('page:finish', () => {
          setTimeout(() => resolve(savedPosition), 50)
        })
      })
    }
    // Scroll to heading on click
    if (to.hash) {
      setTimeout(() => {
        const heading = document.querySelector(to.hash) as any

        return window.scrollTo({
          top: heading.offsetTop,
          behavior: 'auto',
        })
      })
      return
    }

    // route change
    if (from.path !== to.path) {
      nuxtApp.hooks.hookOnce('page:finish', () => {
        window.scrollTo({
          top: 0,
          behavior: 'smooth',
        })
        return
      })
    }

    return { top: 0 }
  },
}