Comment utiliser vue-router pour changer de page dans vue

Cet article présente principalement la méthode d'implémentation du défilement automatique vers le haut lors de l'utilisation de vue-router pour changer de page dans le projet vue. Elle est généralement implémentée à l'aide de la méthode Window scrollTo(). de scrollTop. Les amis dans le besoin peuvent se référer à

Parfois, nous avons besoin que la barre de défilement de la page défile jusqu'à une position fixe, généralement en utilisant la méthode Window scrollTo() .

La syntaxe est : scrollTo(xpos,ypos)

xpos : obligatoire. La coordonnée x du document à afficher dans le coin supérieur gauche de la zone d'affichage du document de la fenêtre.

ypos : obligatoire. La coordonnée y du document à afficher dans le coin supérieur gauche de la zone d'affichage du document de la fenêtre.

Par exemple, la position des coordonnées du contenu défilant est 100 500 :

window.scrollTo(100,500);

D'accord, ce scrollTop est juste brièvement présenté ici. Introduisons le défilement dans veu. -Comportement du routeur.

En utilisant le routage frontal, lorsque vous passez à un nouvel itinéraire, vous souhaitez que la page défile vers le haut ou qu'elle conserve la position de défilement d'origine, tout comme si vous rechargez la page. vue-router peut le faire, mais mieux, il vous permet de personnaliser la façon dont la page défile lors du changement d'itinéraire.

Remarque : Cette fonctionnalité n'est disponible qu'en mode historique HTML5.

Lors de la création d'une instance de routeur, vous pouvez fournir une méthode scrollBehavior :

const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {
  // return 期望滚动到哪个的位置
 }
})

La méthode scrollBehavior reçoit les objets de route vers et depuis. Le troisième paramètre savingPosition est disponible si et seulement si la navigation popstate (déclenchée par les boutons avant/arrière du navigateur).

Cette méthode renvoie les informations d'objet de la position de défilement, qui ressemblent à ceci :

{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

Si elle renvoie une valeur falsy (Note du traducteur : falsy n'est pas faux, reportez-vous à ici) , ou un objet de valeur vide, aucun défilement ne se produira.

Exemple :

scrollBehavior (to, from, savedPosition) {
 return { x: 0, y: 0 }
}

Pour toute navigation acheminée, laissez simplement la page défiler vers le haut.

Retournez à la position enregistrée, et lorsque vous appuyez sur le bouton Précédent/Avant, il se comportera comme le comportement natif du navigateur :

scrollBehavior (to, from, savedPosition) {
 if (savedPosition) {
  return savedPosition
 } else {
  return { x: 0, y: 0 }
 }
}

Si vous souhaitez simuler le comportement "faire défiler jusqu'à l'ancre" :

scrollBehavior (to, from, savedPosition) {
 if (to.hash) {
  return {
   selector: to.hash
  }
 }
}

Nous pouvons également utiliser les méta-informations de routage pour contrôler le défilement à un niveau plus fin.

 routes: [
  { path: '/', component: Home, meta: { scrollToTop: true }},
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar, meta: { scrollToTop: true }}
 ]

Exemple complet :

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = { template: '
home
' }
const Foo = { template: '
foo
' }
const Bar = {
 template: `
  

   bar
   

   
Anchor
  

 `
}
// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = (to, from, savedPosition) => {
 if (savedPosition) {
  // savedPosition is only available for popstate navigations.
  return savedPosition
 } else {
  const position = {}
  // new navigation.
  // scroll to anchor by returning the selector
  if (to.hash) {
   position.selector = to.hash
  }
  // check if any matched route config has meta that requires scrolling to top
  if (to.matched.some(m => m.meta.scrollToTop)) {
   // cords will be used if no selector is provided,
   // or if the selector didn't match any element.
   position.x = 0
   position.y = 0
  }
  // if the returned position is falsy or an empty object,
  // will retain current scroll position.
  return position
 }
}
const router = new VueRouter({
 mode: 'history',
 base: __dirname,
 scrollBehavior,
 routes: [
  { path: '/', component: Home, meta: { scrollToTop: true }},
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar, meta: { scrollToTop: true }}
 ]
})

new Vue({
 router,
 template: `
  

   
Scroll Behavior
   

    
/
    
/foo
    
/bar
    
/bar#anchor
   
   
  

 `
}).$mount('#app')

Je l'ai vérifié sur Internet, et les internautes ont dit que vous pouvez également essayer d'écrire ceci dans le fichier d'entrée main.js avec vue-router

router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
});

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Introduction détaillée au routage et au middleware dans node.js

Comment implémenter les achats de base à l'aide de la fonction Angular Car

Introduction détaillée des composants contrôlés et des composants non contrôlés dans React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!