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');
}

}