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

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

vue-router vue.js javascript

Robo Robok · 技术社区 · 5 年前

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

到目前为止我注册了

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

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

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

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

1 回复 | 直到 5 年前

Husam Ibrahim 5 年前

您需要在 beforeDestroy 或 destroyed 钩子…

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

推荐文章

Jimmy Kiarie · 路由之前的Vue js

6 年前

angelique000 · 对于非常大的Web应用程序,Vue路由器的最佳实践是什么?

6 年前

Felipe Paulo · Vuejs未渲染子路由

6 年前

angelique000 · 如何在Vue组件中加载OpenSeadragon组件

6 年前

dsky · 保持Vue状态

6 年前

Paul Renshaw · Vue。Firebase托管上的js SPA,使用通配符重写Firebase云函数

6 年前

josefdev · 如何在Vue中声明被动属性。js公司

6 年前

ChadQi · 刷新浏览器导致文件路径更改

6 年前

DarkFenix · 访问存储或获取程序的状态_WEBPACK\u IMPORTED\u MODULE\u 3\u store\uuuuuuuuuuuu。a、调度不是一项功能

6 年前

Chad Carter · Vue测试UTIL未知自定义元素:<路由器链接>

6 年前