代码之家 › 专栏 › 技术社区 › Robo Robok

仅在一个vue路由器页上处理keydown事件

vue-router vue.js javascript

0

Robo Robok · 技术社区 · 6 年前

在我的vue.js spa中,我有一个页面想要实现键盘交互。我使用vue路由器来促进链接。

到目前为止我注册了

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

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

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

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

1 回复 | 直到 6 年前

1

Husam Ibrahim 6 年前

您需要在 beforeDestroy 或 destroyed 钩子…

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