Ich erstelle eine kleine Vue Webanwendung, in der ich ein Anker-Tag erstellen möchte.
Ich habe id einem der div gegeben. Ich wollte solche Anchor-Tags haben:
Und hier ist meine Router-Konfiguration:
%Vor%Aber mit diesem Anker funktionieren Tags manchmal und manchmal nicht. Habe ich etwas dabei übersehen?
Ich glaube, Sie möchten direkt zu einem bestimmten Bereich der Seite springen, indem Sie zu einem Anker-Tag wie #section-3 innerhalb der Seite navigieren.
Damit dies funktioniert, müssen Sie Ihre scrollBehavior-Funktion wie folgt ändern:
%Vor%Ref: Ссылка
Ich habe versucht, ein jsFiddle-Beispiel zu erstellen, aber es funktioniert nicht wegen mode:'history' . Wenn Sie den Code kopieren und lokal ausführen, werden Sie sehen, wie es funktioniert: Ссылка
Durch die Rückgabe von {selector: to.hash} in scrollBehavior übergeben Sie den Hashwert des Anker-Tags an die nächste Route, die zum entsprechenden Abschnitt (markiert mit id ) auf dieser Route führt.
Ich bin gerade auch auf dieses Problem gestoßen und dachte, dass es ein wenig Platz gibt, um den Seitenwechsel zu optimieren. In meinem Fall würde ich gerne einen fließenden Übergang machen, anstatt "herum zu springen". Ich habe bereits in jQuery als Alias für $ verlangt.
Hier ist mein Router-Setup für die reibungslose Animation, bitte ändern Sie die Zeilen entsprechend Ihren Bedürfnissen. Dieser Code könnte sauberer gemacht werden, sollte aber gut genug sein, um Ihnen die Arbeitsidee zu zeigen.
%Vor%Side Frage an meiner Seite: Müssen wir etwas zurückgeben? Ich habe keine Probleme mit oder ohne zurück, weil die jQuery Animation die Seitenrolle behandelt.
grüßt Gkiokan
Tags und Links javascript html vue.js