vue中按ctrl原页面锁定打开新页面

可以通过vuex 或者 写个公共文件实现

vuex 实现思路

1.监听键盘按下事件 

2.如果按下的按钮为ctrl, 就修改状态为true, 键盘抬起或者按键不对 状态都为false

3.需要监听所有的路由跳转,那么可以通过路由守卫来监听, 获取vuex中的状态值.如果为true, 那么打开新页面

这里写一个公共js实现步骤

1.创建 keyboard.js 文件

const keys = {}

export function addKeyboardKey (e) {
  // 别用已经废弃的 keycode 字段
  keys[e.key] = true
}

export function removeKeyboardKey (e) {
  delete keys[e.key]
}

export function isCtrlPress(e) {
  return keys['Control']
}

2.全局监听keydown keyup事件

在APP.vue中写入

//引入
import { removeKeyboardKey, addKeyboardKey } from '@/utils/keyboard'


mounted(){
    this.listenCode()
},

methods: {
      // 监听键盘事件
      listenCode(){
        // 添加监听
        window.addEventListener('keydown', addKeyboardKey)
        window.addEventListener('keyup', removeKeyboardKey)
        // 记住添加事件和卸载事件老是成对存在
        this.$once('hook:beforeDestroy', () => {
          window.removeEventListener('keydown', addKeyboardKey)
          window.removeEventListener('keyup', removeKeyboardKey)
        })
      }
    }

3.在全局路由守卫中进行判断

// 下面只展现需求相关代码
import { isCtrlPress } from '@/utils/keyboard'

// 这里省略了router的建立，router是VueRouter的实例
router.beforeEach((to, from, next) => {
  // 在每次路由跳转的时候进行判断
  if (isCtrlPress()) {
    // 若是 ctrl 按键被按下，则以新窗口打开目标页面
    let routeUrl = router.resolve({
         path: to.fullPath,
     });
     window.open(routeUrl.href, "_blank");
     return next(false)
  }
  next()
  // 其余的代码，注意保证next至少和至多被调用一次
  // ...
}

完工!!