在不同页面上使用 nuxt-link 导航到 anchor/hash 无效
Navigating with nuxt-link to anchor/hash on a different page is not working
我想从另一个页面导航到一个页面的特定部分。所以我在 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 项目中这样做。
正在查看我的回答, you can setup the following in a ~/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)
}
})
}
它应该运作良好。当它找不到选择器或仅在特定路径上应用它时,可能只是默默地失败。
我想从另一个页面导航到一个页面的特定部分。所以我在 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 项目中这样做。
正在查看我的回答~/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)
}
})
}
它应该运作良好。当它找不到选择器或仅在特定路径上应用它时,可能只是默默地失败。