Добавьте сочетания клавиш для навигации по следующим и предыдущим страницам

Question

У меня есть три страницы home, about & details, и я добавил keydown прослушиватель событий в ловушку жизненного цикла Vue mounted для каждой страницы, поэтому всякий раз, когда пользователь нажимает ctrl + rightArrow, я запускаю метод nextPage(), который будет выдвигатьследующая страница маршрутизатора vue, аналогично ctrl + leftArrow должна вызвать prevPage().Я реализую одинаковую функциональность на каждой странице с разными маршрутами в nextPage() & prevPage().Здесь проблема в том, что, хотя я не добавил прослушиватель keydown на некоторых страницах, событие запускается и перемещается к маршрутам от ранее загруженного прослушивателя событий, а предыдущие прослушиватели запускаются несколько раз.

export default {
  mounted() {
    window.addEventListener('keydown', this.handleKeyPress);
  },
  methods: {
    handleKeyPress(e) {
      if (e.ctrlKey && e.keyCode === 37) { // Previous page
        this.prevPage();
      } else if (e.ctrlKey && e.keyCode === 39) { // Next page
        this.nextPage();
      }
    },
    nextPage() {
      this.$router.push({ name: 'about' });
    },
    prevPage() {
      this.$router.push({ name: 'home' });
    }
  }
}

Answer 1

Вы можете прикрепить обработчик событий к document

created() {
    if (typeof window !== 'undefined') {
        document.addEventListener('keydown', this.handleKeyPress)
    }
},
beforeDestroy() {
    if (typeof window !== 'undefined') {
        document.removeEventListener('keydown', this.handleKeyPress)
    }
}

Answer 2

Вы связываете событие keydown с окном, и, поскольку у вас есть одностраничное приложение, слушатель все равно будет прослушивать события в окне, даже если вы идете по другому маршруту (поскольку новый маршрут находится в то же самое окно). Вы можете попробовать использовать встроенную функцию обработки событий Vue , чтобы вместо этого связать событие keydown с корневыми элементами каждого из ваших компонентов, как это. Таким образом, при переходе на новый маршрут новый слушатель будет прослушивать новые компоненты.

Вот как можно связать событие с корневым элементом div:

<template>
  <div v-on:keydown="handleKeyPress">
    <rest of your component's template>
  </div>
</template> 

Возможно, вам также понадобится добавить атрибут tabindex="0" в корневой элемент div, чтобы он мог прослушивать для событий клавиатуры.