vue router新标签页打开的两种方法

在vue router打开新标签页的方法。以前我们使用a标签和js可以很方便的打开新标签，但是vue使用vue-router作为它的官方路由，我们则无法使用以前的哪些方式来打开新标签页了。下面介绍一下如何使用vue router打开新标签页？。

先对比一下以前的打开新标签的方法。

<a>标签 target="_blank"

<a href="" target="_blank"> 点击我打开新标签页</a>

window.open

使用js的方法来打开新标签页面。

window.open('xx.com/index/a.html','_blank')

vue router

下面介绍使用vue router打开新标签页有两种方法。

router-link 打开新标签

vue router 封装了一个类似于<a>标签的组件，并且支持<a>标签自带的属性。包括target属性。

<router-link target="_blank" to="/index/home"></router-link>

$router.resolve 打开新标签

$router.resolve 是vue router提供的一个解析路由跳转的目标位置，就是将vue router路由的写法解析成最终浏览器认识的跳转地址，例如{name:'detail',query:{id:this.id}} 最终会被解析成href:"/index/detail?id=b3d1ed85"。

const url = this.$router.resolve({name:'detail',query:{id:this.id}})
window.open(url.href ,'_blank')