vueRouter点击打开新页签

一、vue 路由使用

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

<router-link to="/sub-task-info-detail">子任务详情</router-link>

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

我们大多数情况下也是很希望这样的，但是有时候也希望不覆盖当前页面，直接打开一个新页签，类似于<a href="b.html" traget="_blank">详情</a>

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

那么链接打开新页面这种情况下如何实现呢？分为两种情形：

情形一：纯链接跳转打开新页签

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

<router-link target="_blank" to="/sub-task-info-detail">子任务详情</router-link>    

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

那么如何带查询参数的并且需要新打开页面如何实现呢？请继续看下面：

情形二：带查询参数的页面跳转打开新页签

可以采用编程式的方式实现，代码如下：

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

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

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