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

派小琦

于 2021-10-21 11:33:59 发布

阅读量571

点赞数

文章标签： vue.js 前端 javascript html5

本文链接：https://blog.youkuaiyun.com/weixin_45932460/article/details/120883086

版权

本文介绍如何在Vue应用中使用vue-router实现导航时，既能局部渲染组件，又保持Ctrl点击和滚轮单击打开新窗口的功能，适用于360和谷歌浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运用场景

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

兼容性

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

HTML

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

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

先判断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);
      }
    }
  },