ScrollPosition n'est pas défini en haut lors de la navigation vers d'autres pages

Question

La page Web est conçue selon une approche maître-esclave. Le maître comporte des onglets (volet de gauche) qui, lorsqu'ils sont cliqués, affichent les pages correspondantes dans les esclaves (volet de droite). Par exemple. master a trois deux onglets "Schémas et modèles" où le schéma est affiché par défaut. L'utilisateur peut naviguer entre ces deux pages (chargées par la page esclave) à l'aide des onglets du volet de gauche (chargés par la page maître).

Maintenant, lorsque l'utilisateur fait défiler jusqu'à une position dans la page de schéma et accède à la page de modèle, la position de défilement n'est pas définie sur le haut. Mais le comportement de défilement est défini dans le fichier du routeur.

const createRouter = () =>
  nouveau VueRouter({
     scrollBehavior : () => ({ x : 0, y : 0 }),
     itinéraires :[
     //a tous les itinéraires
     ]
});
Lors de la définition d'un point d'arrêt à proximité du scrollBehavior et de l'observation, la ligne est atteinte chaque fois qu'il y a une navigation, mais la position de défilement n'est pas définie en haut lors de la navigation de l'architecture vers la page du modèle. 
Cependant, lorsque vous faites défiler jusqu'à un emplacement spécifique dans la page du modèle et que vous accédez à la page d'architecture, cette page est placée en haut. 
 J'ai également essayé d'écrire la fonction window.scrollTo(0, 0); dans Mounted() dans templates.ts. Même si l'utilisateur clique dessus, la page n'est pas placée en haut. 
Quelqu'un peut-il expliquer pourquoi cela se produit ? J'ai essayé presque toutes les solutions possibles répertoriées sur stackoverflow. 
            

Answer 1

J'ai également rencontré ce problème en vue. Si vous souhaitez faire défiler vers le haut, vous devrez utiliser cette astuce. Au lieu de window.scrollTo(0, 0);, utilisez-le dans setTimeout, le délai d'attente est très petit.
settimeout(()=>{ window.scrollTo(0, 0); }, 10)
J'espère que cela t'aides.