Блог

Здесь песочница.

У меня есть ссылки, организованные внутри <li> элементов. При событии click я меняю URL страницы на соответствующий <div> элемент id на странице.

Итак, я ищу способ инициировать событие нажатия enter в, makeIt() чтобы я мог перейти к соответствующему <div> элементу.

Вот мой код:

 <template>
<div>
  <div style="margin-top: 50px;"></div>
  <div style="margin-bottom: 50px;">
    <ul>
      <li
        v-for="i in 3"
        :key="i"
        @click="makeIt(i)"
      >
        Link{{ i }}
      </li>
    </ul>
  </div>
  <div
    v-for="i in 3"
    :id="i"
    :class="`div${i}`"
    >
    Div {{ i }}
  </div>
</div>
</template>

<script>

export default {
  methods: {
    makeIt(hashbang) {
      this.$router.push(`#${hashbang}`)
    }
  }
}
</script>

<style>
.div1 {
    background-color: red;
    height: 600px;
}

.div2 {
    background-color: blue;
    height: 500px;
}

.div3 {
    background-color: yellow;
    height: 500px;
}
</style>
  

Как достичь этой цели?

Вы можете передать $event объект из своего шаблона и изменить свою makeIt функцию следующим образом;

HTML:

 @click="makeIt(i, $event)"
  

JS:

 makeIt(hashbang, event) {
if (event.keyCode === 13) {
//do something
}
      this.$router.push(`#${hashbang}`)
    }
  

Я не совсем уверен, что запуск нажатия клавиши Enter является правильным решением для прокрутки вниз до нужного раздела.

Вы могли бы рассмотреть возможность обработки прокрутки с помощью VueScrollTo (вы можете найти его здесь). Тогда это было бы так же просто, как вызвать VueScrollTo.scrollTo() изнутри makeIt метода.

 makeIt(hashbang) {
  this.$router.push(`#${hashbang}`);
  VueScrollTo.scrollTo(`.section-${hashbang}`, 500);
}
  

Вот рабочий пример того, как я бы это сделал: jsfiddle.

Тогда вы все равно можете захотеть добавить индекс к маршруту, чтобы перейти к выбранному разделу при просмотре точного URL.

Редактирую свой ответ, чтобы предложить другой подход:

Поскольку вы используете VueRouter, вы могли бы воспользоваться свойством routes hash и scrollBehavior() методом при определении параметров маршрутизатора. Таким образом, у вас могло бы получиться что-то вроде этого:

 <router-link tag="li" v-for="i in 3" :key="i" :to="{ name: 'theRouteName', hash: '#section-'   i }">Link {{i}}</router-link>
  

Это делает $router.push() часть и весь makeIt() метод ненужными.

Кроме того, вам следует добавить режим прокрутки в конфигурацию маршрутизатора:

 const router = new VueRouter({
  routes,
  mode: "history",
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {˙
      return savedPosition;
    }
    if (to.hash) {
      return { selector: to.hash };
    }
    return { x: 0, y: 0 };
  }
});
  

Я сохранил версию этого решения на jsfiddle, возможно, вы захотите попробовать его в своей изолированной среде или в локальной версии приложения.