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開新窗口了。