Vue Router-更改滚动中的锚点

Posted 2021-05-06

我基本上是试图在我的站点上具有与此处相同的路由行为：https://router.vuejs.org/guide/#html。请注意，当您向下滚动时，链接更改为https://router.vuejs.org/guide/#javascript。向上滚动，反之亦然。重新加载页面时，您的位置将被保存。

我向路由器添加了以下滚动行为：

  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
        return { selector: to.hash }
    } else if (savedPosition) {
        return savedPosition;
    } else {
        return { x: 0, y: 0 }
    }

现在，我可以跳到具有链接的锚点，并且路线会更改。就我所知。具有讽刺意味的是，以Vue Router网站为例，但是无论如何-我该如何复制其行为？

答案

您可以设置一个IntersectionObserver并观察页面上的所有部分。当路段进入视图时，获取路段的ID并推送路线更改：

<div class="section" id="html">
  ...
</div>

<div class="section" id="javascript">
  ...
</div>

data () {
  return {
    sectionObserver: null
  }
},
mounted () {
  this.observeSections()
},
methods: {
  observeSections() {
    try {
      this.sectionObserver.disconnect()
    } catch (error) {}

    const options = {
      rootMargin: '0px 0px',
      threshold: 0
    }
    this.itemObserver = new IntersectionObserver(this.sectionObserverHandler, options)

    // Observe each section
    const sections = document.querySelectorAll('.section')
    sections.forEach(section => {
      this.itemObserver.observe(section)
    })
  },
  sectionObserverHandler (entries) {
    for (const entry of entries) {
      if (entry.isIntersecting) {
         // Push "entry.target.id" to router here 
      }
    }
  }
}