Внутренние ссылки в Vue. js: Использование vue -маршрутизатора для перехода к определенному разделу c в представлении с идентификатором

Question

У меня есть вид на главный экран и вид на блог. Попытка использовать <router-link> для перехода от главного экрана к определенному разделу c в представлении блога. Раздел выглядит как <section id="fundamentals" class="section">

В html Я думаю, это будет работать как <a href="/blog/#fundamentals">Jump to specific blog section</a> Как я могу воспроизвести это с помощью vue -маршрутизатора?

Answer 1

Ознакомьтесь с документацией по поведению прокрутки . В частности, обсуждение прокрутки до ха sh:

If you want to simulate the "scroll to anchor" behavior:

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
      // , offset: { x: 0, y: 10 }
    }
  }
}

Answer 2

Вы можете использовать this и использовать свойство @click.native маршрутизатора, как указано в верхнем ответе. Вы также можете использовать плагин vue -scrollto, что намного проще. Это так же просто, как

<a href="#" v-scroll-to="'#element'">Scroll to #element</a>
 
<div id="element">
    Hi. I'm #element.
</div>

после установки плагина.