我想從另一個頁面導航到頁面的特定部分。所以我在 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 專案中做到這一點。
uj5u.com熱心網友回復：
在這里查看我的答案，您可以在~/app/router.scrollBehavior.js檔案中設定以下內容
export default function (to, from, savedPosition) {
console.log('this is the hash', to.hash)
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
selector: to.hash,
behavior: 'smooth',
})
}, 10)
})
}
它應該運行良好。當它找不到選擇器或僅將其應用于特定路徑時，可能只是默默地失敗。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346398.html
標籤：Vue.js Vuejs2 nuxt.js Vue路由器
上一篇：如何開始使用Vuejs/Nuxtjs應用程式中的@jsplumb/browser-ui？
下一篇：嘗試對陣列進行排序時出現問題？