web-dev-qa-db-fra.com

Comment créer des tags d'ancrage avec Vue Router

Je crée un petit Vue webapp, je veux créer une balise d'ancrage dans ce fichier.

J'ai donné un id à l'un des div Je voulais avoir des balises d'ancrage comme ceci:

<div id="for-home">
   ....
</div>

Et voici la configuration de mon routeur: 

export default new Router({
  abstract: true,
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    { path: '/', component: abcView}
  ]
})

Mais avec cette ancre, les balises fonctionnent parfois et ne fonctionnent pas parfois. Ai-je oublié quelque chose?

javascripthtmlvue.js
12
Saurabh

Je pense que vous vous posez la question de sauter directement à une zone particulière de la page en naviguant vers une balise d'ancrage telle que #section-3 dans la page.

Pour que cela fonctionne, vous devez modifier votre fonction scrollBehavior comme suit:

new VueRouter({
    mode: 'history',
    scrollBehavior: function(to, from, savedPosition) {
        if (to.hash) {
            return {selector: to.hash}
        } else {
            return { x: 0, y: 0 }
        }
    },
    routes: [
        {path: '/', component: abcView},
        // your routes
    ]
});

Réf.: https://router.vuejs.org/guide/advanced/scroll-behavior.html#async-scrolling

J'ai essayé de créer un exemple jsFiddle mais cela ne fonctionne pas à cause de mode:'history'. Si vous copiez le code et que vous l'exécutez localement, vous verrez comment cela fonctionne: https://jsfiddle.net/mani04/gucLhzaL/

En retournant {selector: to.hash} dans scrollBehavior, vous passerez le hachage de balise d'ancrage à l'itinéraire suivant, qui naviguera jusqu'à la section appropriée (marquée à l'aide de id) dans cet itinéraire.

29
Mani

Je viens aussi de rencontrer ce problème et je pensais qu'il y avait un peu d'espace pour optimiser l'échange de pages. Dans mon cas, je voudrais faire une transition en douceur au lieu de "sauter arround". J'ai déjà demandé à jQuery un alias pour $.

Voici la configuration de mon routeur pour une animation fluide. N'hésitez pas à modifier les lignes selon vos besoins. Ce code pourrait être rendu plus propre mais devrait être assez précis pour vous montrer l'idée de travail.

// Register Router and Paths
const router = new VueRouter({
    mode: 'history',
    routes : [
        { path: '/aboutme/', component: index, name:'me.index'},
        { path: '/aboutme/cv', component: cv, name:'me.cv' }
    ],

    // Build smooth transition logic with $
    scrollBehavior (to, from, savedPosition) {
       if (to.hash) {
          return $('html,body').stop().animate({scrollTop: $(to.hash).offset().top }, 1000);
       } else {
          return $('html,body').stop().animate({scrollTop: 0 }, 500);
       }
    }
})

Côté Question de mon côté: Devons-nous rendre quelque chose? Je n'ai aucun problème avec ou sans retour, car l'animation jQuery gère le défilement de la page.

cordialement Gkiokan

2
Gkiokan

Si vous avez besoin de faire du scrollTor animé, j’utilise le paquet vue-scrollTo: c’est très facile à installer. 

Des exemples avec docs et code peuvent être trouvés ici: https://rigor789.github.io/vue-scrollto/

0
AndrewRIGHT