我有一個Nuxt專案。當我從http://localhost:3000/catalog/postery更改路由到http://localhost:3000/catalog/postery/all?photos[]=262時，我的頁面會滾動到頂部，只有在我的路由改變之後
我的檔案scrollBehavior.js：
export default async function (to, from, savedPosition) {
if (
(to.path.indexOf("/catalog/") !== -1 &&
to.path.indexOf("/all") === -1 &&
Object.keys(to.query).length > 0) ||
(to.path.indexOf("/search") !== -1 && Object.keys(to.query).length > 0) ||
(to.name === "product-type-id" && Object.keys(to.query).length > 0) ||
(from.name === "product-type-id" &&
to.name === "product-type-id" &&
to.params.type != from.params.type)
) {
return;
}
if (to.path.indexOf("/catalog/") !== -1 && savedPosition != null) {
return { x: 0, y: savedPosition.y };
}
return { x: 0, y: 0 };
}
我如何在更改路由之前防止頁面滾動到頂部？
所以，你確實想要：
從Vue路由器的文件來看，你可以使用這樣的程式碼
#/app/router.scrollBehavior.jsexport default function () { return { x: 0, y: 0, behavior: 'smooth' } }你也可以使用條件或
setTimeout來實作export default function (to, from, savedPosition) { if (to.path === '/my-cool-path') { return { x: 0, y: 0, behavior: 'smooth' } } }export default function (to, from, savedPosition) { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ x: 0, y: 0, behavior: 'smooth' }) }, 2000) }) }這個答案使用
vue-scrollto也可能有幫助。最後的選擇是使用一些過渡效果來隱藏醜陋的抖動/加載，這實際上可以非常吸引人。