vue-router 如何在新窗口打开页面

1. <router-link>标签实现新窗口打开:

官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本的 <router-link> 是支持 target="_blank" 属性的(tag="a"),如下:

<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面打开home页</router-link>

2、编程式导航:

有些时候需要在单击事件或者在函数中实现页面跳转,那么可以借助router的示例方法,通过编写代码实现。我们常用的是 $router.push 和 $router.go 但是vue2.0以后,这种方式就不支持新窗口打开的属性了,这个时候就需要使用this.$router.resolve,如下:

seeShare(){
     let routeUrl = this.$router.resolve({
          path: "/share",
          query: {id:96}
     });
     window.open(routeUrl .href, '_blank');
}

当然了,你可以使用query,也可以使用params,具体请参见:https://www.jianshu.com/p/45ee7a6bdc0c

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,010评论 19 139
  • 今天是感恩节!这让我想起了我和孩子们一起度过的一个感恩节的故事。 庾信《徵调曲》:“落其实者思其树,饮其流者怀其源...
    缘媛的简书阅读 505评论 2 3
  • 芃麦阅读 358评论 4 7
  • 阅读时间:2015年11月4日晚上八点到九点 阅读书目:建筑类型学与城市形态学 阅读摘要:某个时代,文化实践仅能从...
    建规首届贾世林阅读 852评论 0 0
  • 今天微信群里大家都在讨论教育问题,批评填鸭式教学、教育制度刻板的言论很多。我默默看着,没有参与,但还是有话想说,写...
    王佩阅读 2,201评论 18 71