J'ai un projet Nuxt. Quand je pars de http://localhost:3000/catalog/postery更改路由到http://localhost:3000/catalog/postery/all?photos%5B%5D=262, ma page défile vers le haut, seulement après que mon itinéraire change
Mon fichier 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 };
}
Comment puis-je empêcher la page de défiler vers le haut avant de modifier l'itinéraire ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Alors, vous voulez :
D'après la documentation de Vue Router, vous pouvez utiliser un code comme celui-ci
/app/router.scrollBehavior.jsexport default function () { return { x: 0, y: 0, behavior: 'smooth' } }Vous pouvez également utiliser des conditions ou
setTimeoutpour réaliserexport 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) }) }Cette réponse en utilisant
vue-scrolltopeut également être utile.La dernière option consiste à utiliser des Effets de transition pour masquer les vilains tremblements/chargements, ce qui peut en fait être très attrayant.