Vue Маршрутизатор - Изменить привязку в маршруте при прокрутке - PullRequest
Новая
       79

Vue Маршрутизатор - Изменить привязку в маршруте при прокрутке

2 голосов
/ 06 мая 2020

Я в основном пытаюсь иметь точно такое же поведение маршрутизации на моем сайте, как здесь: 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 }
    }

Теперь я могу перейти к привязке со ссылкой, и маршрут изменится. Это примерно то, что я понял. Какая-то ирония c, чтобы выбрать в качестве примера веб-сайт Vue Router, но в любом случае - как я могу воспроизвести его поведение?

1 Ответ

2 голосов
/ 07 мая 2020

Вы можете установить IntersectionObserver и просматривать все разделы на странице. Когда секция входит в представление, возьмите идентификатор секции и обновите маршрут: 

<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.sectionObserver = new IntersectionObserver(this.sectionObserverHandler, options)

    // Observe each section
    const sections = document.querySelectorAll('.section')
    sections.forEach(section => {
      this.sectionObserver.observe(section)
    })
  },
  sectionObserverHandler (entries) {
    for (const entry of entries) {
      if (entry.isIntersecting) {
         const sectionId = entry.target.id
         // Push sectionId to router here 
         this.$router.push({ name: this.$route.name, hash: `#${sectionId}` })
      }
    }
  }
}
...