Блог

Как я могу прокрутить страницу вниз до элемента, идентификатор которого включен в качестве параметра запроса в маршрутизаторе? Я использую маршрутизатор Vue для маршрутизации.

Вариант 1: поведение прокрутки маршрутизатора Vue

Вы можете настроить поведение прокрутки маршрутизатора Vue для автоматической прокрутки до элемента. Это поведение применяется ко всем представлениям / страницам, позволяя запрашивать любой путь маршрута.

 export default new VueRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    }
    if (to.query amp;amp; to.query.id) {
      return {
        selector: '#'   to.query.id,
        behavior: 'smooth',
      }
    }
  }
})
 

демонстрация 1

Вариант 2: смотреть $route.query

Вы могли бы использовать Element.scrollIntoView() ссылку на шаблон вместе с наблюдателем $route.query для вызова этой функции прокрутки:

 <template>
  <div>
    <h1 ref="first">First</h1>
    <h1 ref="second">Second</h1>
  </div>
</template>

<script>
export default {
  methods: {
    scrollTo(name) {
      this.$refs[name]?.scrollIntoView({ behavior: 'smooth' })
    },
  },
  watch: {
    '$route.query'(query) {
      if (query.id) {
        this.scrollTo(query.id)
      }
    },
  },
}
</script>
 

демонстрация 2