使用 nuxt-link 导航到不同页面上的锚点/哈希不起作用

Posted 2023-02-16

【中文标题】使用 nuxt-link 导航到不同页面上的锚点/哈希不起作用

【英文标题】：Navigating with nuxt-link to anchor/hash on a different page is not working

【发布时间】：2021-12-17 15:38:42

【问题描述】：

我想从另一个页面导航到页面的特定部分。所以我在 nuxt.config.js 文件中的路由器对象中添加了 scrollBehavior 函数，如下所示：

router: 
    scrollBehavior(to) 
      if (to.hash) 
        return 
          selector: to.hash,
          behavior: "smooth"
        ;
      
    
  

我的“页面”目录树是这样的：

pages/
   index.vue
   parent.vue
   random.vue

在'layouts'目录的default.vue中我写了导航栏：

<button @click="$router.push( name: 'parent' )">Parent One</button>
<button @click="$router.push( name: 'parent', hash: '#sec2' )">Parent Two</button>

在 parent.vue 中我有两个部分：

<div class="sec-1" id="sec1">
      <h1>Parent One</h1>
      <p>...
      </p>
</div>
<div class="sec-2" id="sec2">
      <h1>Parent Two</h1>
      <p>...
      </p>
</div>

现在，问题是当我单击 random.vue 文件中的“父二”按钮时，它不起作用。但是当我在 parent.vue 文件中并单击按钮时，它会滚动到第二部分。但我想从 random.vue 页面导航到第二部分。如果我在 vue 项目中编写确切的代码，那么它可以正常工作，但在 nuxt 项目中不起作用。但我需要在我的 Nuxt 项目中这样做。

【参考方案1】：

查看我的回答here，您可以在~/app/router.scrollBehavior.js 文件中设置以下内容

export default function(to, from, savedPosition) 
  console.log("this is the hash", to.hash)
  return new Promise((resolve, reject) => 
    if (to.hash) 
      setTimeout(() => 
        resolve(
          selector: to.hash,
          behavior: "smooth"
        )
      , 10)
    
  )

它应该运作良好。当它没有找到选择器或仅将其应用于特定路径时，可能只是默默地失败。