vue单页应用如何管局全局事件？

Question

现在需要做一个项目运行在一款按键手机上（是的，类似小灵通，但是系统是KaiOS），项目有多个路由，很多基础组件,每个组件里面都要注册window.onkeydown事件,我现在都是复制粘贴每个组件重新注册一遍，然后在beforeRouteLeave钩子里面移除keydown事件。而且公共组件里面比如dialog、actionsheet之类的公共组件里面也各自注册window.onkeydown事件。

想咨询下各位资深的前端er们，遇到此类问题是应该怎么管理比较好呢？而且按键经常冲突，因为在不同组件情况下，手机的界面的底部左中右三个按键触发的事件还是不同的，所以要加好多条件判断

相关代码

activated() {

window.addEventListener('keydown', this.onkeyHandle);

},
beforeRouteLeave(to, from, next) {

console.log('session list router leave');
window.removeEventListener('keydown', this.onkeyHandle);
next();

},
onkeyHandle(evt) {

let key = evt.key;
switch (key) {
    case 'ArrowUp':
        //TODO
        break;
    case 'ArrowDown':
        //TODO
        break;
    case 'Enter':
        //TODO
        break;
    case 'SoftRight':
        //TODO
        break;
    case 'SoftLeft':
        // TODO
        break;
    case 'Backspace':
        //TODO
        break;
    default:
        console.log('default');
}

}

Answer 1

按键手机 + KaiOS系统 = 脑阔疼

Answer 2

写个全局的指令，用rxjs的思路去做。

bind的时候subscribe下
update的时候先unsubscribe然后重新
unbind的时候unsubscribe

modifiers可以用来做禁止其他和指定按键之类的。

<div v-globalkey.softleft="***"></div>