Javascript 仅在一个Vue路由器页面上处理keydown事件

在我的Vue.js SPA中，我有一个页面，我想在其中实现键盘交互。我使用Vue路由器来方便链接

到目前为止我注册了

const interactiveComponent = {
    //
    methods: {
        handleKeyboard(event) {
            // do something
        }
    },
    created() {
        document.addEventListener('keydown', this.handleKeyboard);
    },
    //
};

问题是，当我离开该页面时，处理程序仍然处于活动状态

更糟糕的问题是，当我访问该页面，然后离开并返回时，处理程序会再次注册，我的事件会运行两次

---

Vue.js中是否存在容纳此类处理程序的约定？

您需要在销毁之前或销毁之前删除

钩子中的事件侦听器

const interactiveComponent = {
    //
    methods: {
        handleKeyboard(event) {
            // do something
        }
    },
    created() {
        document.addEventListener('keydown', this.handleKeyboard);
    },
    beforeDestroy() {
        document.removeEventListener('keydown', this.handleKeyboard);
    },
};

生命周期中的
已销毁（）中的
removeListener
！它工作得很好。我认为在Vue路由器中有一些自动化的方法，但是简单的
removeEventListener（）
销毁组件就可以了。