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 pathund eine hashEigenschaft hinzu to:

<router-link :to="{ path: '/careers/job-1', hash: '#apply' }">test</router-link>

Und fügen Sie scrollBehaviorIhrer 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 behaviorEigenschaft nicht entfernen ) zu dem durch den Hash definierten Anker scrollen