Rumah > Soal Jawab > teks badan
Saya ada projek Nuxt. Apabila saya pergi dari http://localhost:3000/catalog/postery
更改路由到http://localhost:3000/catalog/postery/all?photos%5B%5D=262
, halaman saya menatal ke atas, hanya selepas laluan saya berubah
Fail saya 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 }; }
Bagaimanakah cara saya menghalang halaman daripada menatal ke atas sebelum menukar laluan?
P粉1477476372023-11-07 14:51:34
Jadi, anda mahukan:
Daripada dokumentasi Vue Router, anda boleh menggunakan kod seperti ini
/app/router.scrollBehavior.js
export default function () { return { x: 0, y: 0, behavior: 'smooth' } }
Anda juga boleh menggunakan syarat atau setTimeout
untuk mencapai
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) }) }
Jawapan ini menggunakan vue-scrollto
mungkin juga membantu.
Pilihan terakhir ialah menggunakan beberapa Kesan Peralihan untuk menyembunyikan gegaran/pemuatan hodoh, yang sebenarnya boleh menjadi sangat menarik.