使用vue-router时，根据需求选择路由跳转或新窗口打开，ctrl和滚轮点击不影响

运用场景

当在使用vue-router搭建导航时，既想局部渲染对应模块又不能舍弃Ctrl点击、滚轮单击打开新窗口功能，可以参考以下代码

兼容性

360浏览器、谷歌都可正常跳转

HTML

设置a标签点击事件，并且传入evert参数

      <div>
        <a :href="link" @click="NavOn($event, link)">
          {{ name }}
        </a>
      </div>

JS

先判断ctrl是否按住，则不阻止a标签事件，直接跳转到新窗口

没有按住则组织a标签跳转并使用vue-router跳转，并且根据preventDefault特性无法阻止滚轮单击。

  methods: {
    NavOn(e, link) {
      // 按下ctrl 不阻止a标签跳转
      if (e.MetaKey || e.ctrlKey || e.button === 1) {
      } else {
        // 没有按下ctrl 阻止a标签跳转并且使用$router切换页面
        e.preventDefault();
        this.$router.push(link);
      }
    }
  },