笔记，Vue项目中在vue页面中监听路由、vue页面中静止键盘事件

原创于 2019-08-19 17:38:42 发布 · 557 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍在Vue组件中如何监听路由变化及处理按钮元素的键盘事件，避免默认行为，如空格和Enter键触发点击。通过实例展示了watch属性监听路由更新和自定义方法拦截键盘事件的具体实现。

1.vue组件页面中监听路由变化

例如a.vue文件：

watch:{
            $route(to,from){
                console.log(to.path);
                
            }
        },

2.vue组件页面中监听键盘事件(button标签去除在鼠标点击获取焦点后，按空格和enter键的点击事件）

例如b.vue文件：

<template>
<button  @click="_click($event)"></button>
</template>
<script>
  export default {
    methods:{
      _click(event){
        let _this = this;
        event.target.onkeydown = function (e) {
          console.log(e.keyCode);
          return _this.keyEvent;// button按钮禁止所有的键盘事件
        };
     
        this.$emit('click');
      }
    }
  }
</script>