web-dev-qa-db-de.com

So erstellen Sie Ankertags mit Vue Router

Ich erstelle eine kleine Vue webapp, ich möchte hier einen Anker-Tag erstellen.

Ich habe einer id eine div gegeben. Ich wollte Ankertags wie diese haben:

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

Und hier ist meine Router-Konfiguration: 

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

Aber mit diesem Anker-Tags funktionieren manchmal und manchmal nicht. Habe ich etwas in diesem verpasst?

12
Saurabh

Ich glaube, Sie fragen, ob Sie direkt zu einem bestimmten Bereich der Seite springen möchten, indem Sie zu einem Ankertag wie #section-3 auf der Seite navigieren.

Damit dies funktioniert, müssen Sie die Funktion scrollBehavior wie folgt ändern:

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
    ]
});

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

Ich habe versucht, ein jsFiddle-Beispiel zu erstellen, aber es funktioniert wegen mode:'history' nicht. Wenn Sie den Code kopieren und lokal ausführen, werden Sie sehen, wie er funktioniert: https://jsfiddle.net/mani04/gucLhzaL/

Durch die Rückkehr von {selector: to.hash} in scrollBehavior übergeben Sie den Ankertag-Hash an die nächste Route, die zum entsprechenden Abschnitt (markiert mit id) in dieser Route navigiert.

29
Mani

Ich bin auch gerade auf dieses Problem gestoßen und dachte, es gibt ein wenig Platz, um den Seitentausch zu optimieren. In meinem Fall möchte ich einen glatten Übergang machen, anstatt "herumzuspringen". Ich habe bereits in jQuery als Alias ​​für $ benötigt.

Hier ist mein Router-Setup für die reibungslose Animation. Sie können die Zeilen entsprechend Ihren Bedürfnissen anpassen. Dieser Code könnte sauberer gemacht werden, sollte aber fein genug sein, um Ihnen die Arbeitsidee zu zeigen.

// 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);
       }
    }
})

Nebenfrage auf meiner Seite: Müssen wir etwas zurückgeben? Ich habe keine Probleme mit oder ohne zurückzukehren, da die jQuery-Animation den Bildlauf durchführt.

grüße Gkiokan

2
Gkiokan

Wenn Sie einen animierten scrollTo erstellen möchten, verwende ich das Paket vue-scrollTo: Es ist sehr einfach einzurichten. 

Beispiele mit Dokumenten und Code finden Sie hier: https://rigor789.github.io/vue-scrollto/

0
AndrewRIGHT