Прокрутка до якорей с помощью Vue Router

Question

Мне нужна установка якорной ссылки в vuejs, чтобы перейти к:

<h1 id="apply">Test anchor</h1>

Следующее работает, но меняет URL-адрес на http: // localhost: 8080 / # / apply

<a href="#apply" class="btn btn-primary mt-3">Apply Now</a>

Если я затем обновлю страницу, он не знает, куда идти.

Следующее для меня тоже не работает. Он даже не опускается до #apply.

<router-link to="/careers/job-1#apply">test</router-link>

Как настроить якорные ссылки с маршрутизацией vuejs?

Answer 1

Добавьте pathи в hashсобственность вашего toобъекта:

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

И добавьте scrollBehaviorв определение вашего маршрутизатора:

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
  },
  ...
})

Теперь он должен прокручиваться (плавно, если вы не удалите это behaviorсвойство) до привязки, определенной хешем