Comment empêcher la page de défiler après des changements d'itinéraire dans Nuxt ?

Question

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 ?

Answer 1

Alors, vous voulez :

• Cliquez sur le lien
• Démarrer la page de rendu
• Faites défiler vers le haut

D'après la documentation de Vue Router, vous pouvez utiliser un code comme celui-ci

/app/router.scrollBehavior.js

export default function () {
  return { x: 0, y: 0, behavior: 'smooth' }
}

Vous pouvez également utiliser des conditions ou setTimeout pour réaliser

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)
  })
}

Cette réponse en utilisant vue-scrollto peut é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.