Scrollen zu Ankern mit Vue Router
Dec 05 2020
Ich benötige ein Anker-Link-Setup in vuejs, um zu:
<h1 id="apply">Test anchor</h1>
Das Folgende funktioniert, aber es ändert die URL in http: // localhost: 8080 / # / apply
<a href="#apply" class="btn btn-primary mt-3">Apply Now</a>
Wenn ich dann die Seite aktualisiere, weiß sie nicht, wohin sie gehen soll.
Das Folgende funktioniert auch bei mir nicht. Es fällt nicht einmal auf #apply.
<router-link to="/careers/job-1#apply">test</router-link>
Wie richte ich Ankerverbindungen mit vuejs Routing ein?
Antworten
1 Dan Dec 05 2020 at 07:51
Fügen Sie Ihrem Objekt eine path
und eine hash
Eigenschaft hinzu to
:
<router-link :to="{ path: '/careers/job-1', hash: '#apply' }">test</router-link>
Und fügen Sie scrollBehavior
Ihrer Router-Definition Folgendes hinzu:
const router = new VueRouter({
...
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash,
behavior: 'smooth'
};
}
return { x: 0, y: 0 }; // Go to the top of the page if no hash
},
...
})
Jetzt sollte es (reibungslos, sofern Sie diese behavior
Eigenschaft nicht entfernen ) zu dem durch den Hash definierten Anker scrollen