在其他页面上使用指向锚/哈希的nuxt链接导航不起作用

Question

我想从另一个页面导航到页面的特定部分。所以我在nuxt.config.js文件中的router对象中添加了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-two"按钮时，它不起作用。但当我在parent.vue文件中并单击按钮时，它会滚动到第二部分。但我想导航到random.vue页面的第二部分。如果我在vue项目中编写了确切的代码，那么它可以很好地工作，但在nuxt项目中不起作用。但我需要在我的Nuxt项目中做到这一点。

Answer 1

看看我的答案，您可以在~/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)
}
})
}

它应该运行良好。当它找不到选择器或只在特定路径上应用选择器时，可能只是无声地失败。