web-dev-qa-db-fra.com

Ancre Vue.js à diviser dans le même composant

Je développe une application Vue.js et j'ai du mal à lier une ancre à une certaine div d'un composant.

J'ai l'ancre suivante:

<a href="#porto" class="porto-button">Porto, Portugal</a>

et la div suivante:

<div id="porto" class="fl-porto">

J'utilise vue-router en mode de hachage.

Le problème est que chaque fois que je clique sur le "bouton porto", il me redirige vers la page "d'accueil" ('/')

J'utilise Vue.js 1.X et j'ai essayé d'utiliser le mode historique (URL sans le hashbang) mais cela me donne un cannot GET '/page' erreur lors de l'actualisation d'une page.

Est-ce que je fais quelque chose de mal? Que puis-je faire à ce sujet?

htmlvue.jsvue-router
10
fmlopes

Étant donné que vous utilisez le routeur en mode de hachage, vous ne pourrez pas faire défiler aussi facilement car le défilement jusqu'à /#something vous redirigera réellement vers la page "quelque chose".

Vous devrez émuler le comportement de défilement par vous-même, essayez de faire quelque chose comme ça:

//P.S. the code is written for Vue 2.
//You will have to adjust it to Vue 1.

//Your view:
<a class="porto-button" @click="scrollMeTo('porto')">Porto, Portugal</a>
...
<div ref="porto" class="fl-porto">

//Your code:
methods: {
  scrollMeTo(refName) {
    var element = this.$refs[refName];
    var top = element.offsetTop;

    window.scrollTo(0, top);
  }
}

Comment ça fonctionne:

  1. Définissez les références via l'attribut ref sur l'élément vers lequel vous souhaitez faire défiler;
  2. Écrivez une fonction qui définira par programme window.scrollY au top de l'élément référencé.
  3. La tâche est finie :)

Mise à jour 1:

jsfiddle https://jsfiddle.net/5k4ptmqg/4/

Mise à jour 2:

Semble que dans Vue 1 ref="name" ressemblait à el:name(docs) , voici un exemple mis à jour:

https://jsfiddle.net/5y3pkoyz/2/

18
euvl

Ce qui a fonctionné pour moi

<router-link to="#leaders">Leaders</router-link>

ou dynamique

<router-link :to="`#${subMenuItem.linkTarget}`" class="page-submenu-list__link">
                    {{subMenuItem.linkTitle}}
                </router-link>

dans le routeur

routes:[],
scrollBehavior (to, from, savedPosition) {
    //https://router.vuejs.org/guide/advanced/scroll-behavior.html
    if (to.hash) {
            return { selector: to.hash }
        } else if (savedPosition) {
            return savedPosition;
        } else {
            return { x: 0, y: 0 }
        }
  }
6
Arlan T

Une autre méthode consiste à utiliser "scrollIntoView ()"

Donc, le code d'Euvl est toujours là, sauf que vous changeriez légèrement la méthode:


    new Vue({
      el: '#app',
      methods: {
        goto(refName) {
            var element = this.$els[refName];
          element.scrollIntoView();
        }
      }
    })

Si vous vouliez être sophistiqué et rendre le défilement fluide, vous pouvez même ajouter ce qui suit:

element.scrollIntoView({ behavior: 'smooth' });

Notez que cela nécessitera un polyfill pour les navigateurs plus anciens.

0
Cathy Ha