一、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开新窗口了。