Question

我有三个页面 home, about & details 并且我在 Vue mounted 生命周期挂钩上为每个页面添加了一个 keydown 事件监听器，所以每当用户点击 ctrl + rightArrow 我' m 触发 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

您将 keydown 事件绑定到 window，并且由于您有一个单页应用程序，侦听器仍将侦听 window 上的事件，即使你去了另一条路线（因为新路线在同一条 window 中）。您可以尝试使用 Vue 的内置 event handling 功能，而不是像这样将 keydown 事件绑定到每个组件的根元素。这样，当您转到新路线时，新的侦听器将侦听新组件。

这是将事件绑定到 div 根元素的方法：

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

您可能还需要将 tabindex="0" 属性添加到 div 根元素，以便它能够 listen 用于键盘事件。

Answer 2

您可以将事件处理程序附加到 document

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

添加键盘快捷键以导航下一页和上一页

Add keyboard shortcuts to navigate next & prev pages

keyboard-shortcuts

keydown

vue.js

vue-router

vue-component