NuxtLink 到哈希

Posted 2023-02-16

【中文标题】NuxtLink 到哈希

【英文标题】：NuxtLink to hash

【发布时间】：2022-01-17 12:52:44

【问题描述】：

我正在尝试使用 NuxtLink 滚动到锚标记。从文档中我看到我需要创建这个文件app/router.scrollBehavior.js 并将我的代码放在那里。

例如，这行得通。它在 y 轴上滚动 500px，但我真正想要的是滚动到散列。

export default function (to, from, savedPosition) 
  if (to.hash) 
    return  x: 0, y: 500 
  

活动页面

<div
  v-for="(event, i) in events"
  :id="event.id"
  :ref="event.id"
  :key="i"
>
</div>

导航组件

<NuxtLink
  v-for="item in items"
  :key="`item.id"
  :to="item.href"
>
   item.name 
</NuxtLink>

我无法让它滚动到散列。我尝试了几个选项，但似乎都没有。例如：

不起作用（我也用选择器代替 el 进行了测试）

export default function (to, from, savedPosition) 
  if (to.hash) 
    return 
      el: to.hash,
      behavior: 'smooth',
    
  

不起作用

export default function (to, from, savedPosition) 
  return new Promise((resolve, reject) => 
    if (to.hash) 
      setTimeout(() => 
        resolve(
          el: to.hash,
          behavior: 'smooth',
        )
      , 500)
    
  )

有什么想法可能是问题吗？

【问题讨论】：

我实现过一次like this。

to.hash 中是否有您所期望的内容，以及您的模板看起来如何？

@kissu to.hash 看起来像这样 #world-event

模板呢？

我更新了问题并添加了事件页面和导航组件。

【参考方案1】：

好的，所以最后这对我有用。我必须安装 Vue-Scroll 和 app/router.scrollBehavior.js

import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo)

export default function (to, from, savedPosition) 
  return new Promise((resolve, reject) => 
    setTimeout(() => 
      if (to.hash) 
        VueScrollTo.scrollTo(to.hash, 300,  easing: 'linear', offset: -60 )
      
    , 500)
  )

我将此答案用作参考 How to smoothly scroll to an element via a hash in Nuxt?，但我不得不将 setTimeOut 时间从 10 毫秒更改为 500 毫秒，因为它在我的静态页面上无法正常工作。