Обработка события нажатия клавиш только на одной странице Vue Router

Question

В моем Vue.js SPA есть одна страница, где я хотел бы реализовать взаимодействие с клавиатурой.Я использую Vue Router для облегчения связи.

Пока я зарегистрировался

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

Проблема в том, что когда я покидаю эту страницу, обработчик все еще активен.

ДажеХуже всего то, что когда я захожу на эту страницу, затем ухожу и возвращаюсь, обработчик снова регистрируется, и мое событие запускается дважды.

Существует ли какое-либо соглашение в Vue.js для размещения такого типа обработчика?

Answer 1

Вам нужно удалить этот прослушиватель событий в хуке beforeDestroy или destroyed.

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