routervue页签文字_vueRouter点击打开新页签

一、vue 路由使用

vue是单页面SPA&＃xff0c;一般我们使用vue-router 设定路由进行页面跳转的时候&＃xff0c;都是直接覆盖当前页面。比如&＃xff0c;在a页面中有如下超链接

子任务详情

直接这样设置的话&＃xff0c;会在当前页面直接修改url,覆盖原始页面。

我们大多数情况下也是很希望这样的&＃xff0c;但是有时候也希望不覆盖当前页面&＃xff0c;直接打开一个新页签&＃xff0c;类似于详情

二、vue项目中实现链接打开新页签

那么链接打开新页面这种情况下如何实现呢&＃xff1f;分为两种情形&＃xff1a;

情形一&＃xff1a;纯链接跳转打开新页签

可能你会直接想因为经过解析会以超链接的html方式展示&＃xff0c;那么直接在其中按照超链接a的方式直接设定traget不就行了么&＃xff0c;也就是下面的代码

子任务详情

经过试验&＃xff0c;这种方式是可以在新页面打开的&＃xff0c;但是无法带查询参数&＃xff0c;只能是纯链接的方式跳转。所以如果url中带查询参数这种方式是不可以的&＃xff0c;不建议这样用。

那么如何带查询参数的并且需要新打开页面如何实现呢&＃xff1f;请继续看下面&＃xff1a;

情形二&＃xff1a;带查询参数的页面跳转打开新页签

可以采用编程式的方式实现&＃xff0c;代码如下&＃xff1a;

const {href} &＃61; this.$router.resolve({

name: &＃39;foo&＃39;,

query: {

bar

}

})

window.open(href, &＃39;_blank&＃39;)

可以使用上面的方式&＃xff0c;在query中书写查询对象&＃xff0c;然后使用window.open()方法打开即可。

vue 2.1.0版本后&＃xff0c;使用路由对象的resolve方法解析路由&＃xff0c;可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。