web-dev-qa-db-fra.com

Vue.js défiler vers le haut de la page pour le même itinéraire

Je peux définir le comportement de défilement sur Vue.js Router comme ceci:

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'index',
            component: Main
        },
        {
            path: '/some-path',
            name: 'some-path',
            component: SomePath
        }
    ],
    scrollBehavior() {
        return {x: 0, y: 0}
    }
})

Cela fonctionne parfaitement lorsque vous cliquez sur le lien avec une page non actuelle. Lorsque je clique sur le lien déjà affiché, c’est-à-dire dans le pied de page, rien ne se passe. Vue Le routeur suppose qu'il n'y a pas de transition d'état. Quel est le moyen préféré de faire défiler vers le haut dans ce cas?

vue.jsvue-router
20
kuceram

Vous ne pouvez pas faire cette vue-routeur. Mais vous pouvez ajouter la méthode de défilement vers le haut à chaque lien de routeur.

Il suffit de créer une méthode

 methods: { 
           scrollToTop() {
                window.scrollTo(0,0);
           }
        }

Et l'ajouter au lien

<router-link @click.native="$scrollToTop">

si vous voulez aussi l’utiliser en dehors de votre pied de page, il est préférable de l’ajouter au prototype Vue prototype

Vue.prototype.$scrollToTop = () => window.scrollTo(0,0)

Ce n'est pas une solution à 100% mais c'est la plus simple

34
Vitaly Migunov

Je voulais répondre à cette question pour en ajouter plus aux gens qui viennent à cette question où le comportement de défilement ne fonctionne pas du tout.

Je ne pouvais obtenir aucune des solutions ci-dessus, et c'était vraiment frustrant.

Ce qui a fini par travailler pour moi était le suivant:

const router = new Router({
    mode: 'history',
    routes: [...],
    scrollBehavior() {
        document.getElementById('app').scrollIntoView();
    }
})

Je monte mon application VueJs sur #app afin que je puisse être certain qu'elle est présente et disponible pour la sélection.

4
Sweet Chilly Philly

Vous pouvez soit utiliser behavior: smooth si tu veux.

moveTo () {
  let to = this.moveToDown
    ? this.$refs.description.offsetTop - 60
    : 0

  window.scroll({
    top: to,
    left: 0,
    behavior: 'smooth'
  })

  this.moveToDown = !this.moveToDown
}
1
PJ.Wanderson

Utilisez ce composant Nice: https://www.npmjs.com/package/vue-backtotop

<back-to-top text="Back to top"></back-to-top>
0
Sinan Eldem