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

Question

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

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

我的“pages”目录树如下所示：

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 two‘按钮时，它不起作用。但是当我在parent.vue文件中点击按钮时，它会滚动到第二部分。但是我想从random.vue页面导航到第二部分。如果我在vue项目中编写确切的代码，那么它工作得很好，但在nuxt项目中不起作用。但我需要在我的Nuxt项目中这样做。

Answer 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)
    }
  })
}

它应该工作得很好。当它找不到选择器或仅在特定路径上应用选择器时，可能只是静默地失败。