vue路由如何在新視窗打開頁面

一. <router-link>标簽實作新視窗打開：

官方文檔中說 v-link 指令被 <router-link> 元件指令替代，且 <router-link> 不支援

target="_blank"

屬性，如果需要打開一個新視窗必須要用

<a>

标簽，但事實上vue2版本的 <router-link> 是支援

target="_blank"

屬性的(tag="a")，示例如下：

<router-link target="_blank" :to="{path:'/user/document',query:{id:'1'}}">新頁面打開home頁</router-link>           

複制

注：隻有tag="a"模式下 target="_blank" 屬性才會生效。

二. 程式設計式導航：

有些時候需要在單擊事件或者在函數中實作頁面跳轉，那麼可以借助router的示例方法，通過編寫代碼實作。我們常用的是 router.push 和 router.go ,但是vue2.0以後，這種方式就不支援新視窗打開的屬性了。這兩種平常用的都比較多，這裡就不再贅述。百度了下，找到了使用

let routeUrl = this.$router.resolve({
      path: "/share",
      query: {id:96}
 });
 window.open(routeUrl .href, '_blank');           

複制

三、直接使用a标簽：

<a href="http://localhost:8088/" target="_blank">{{ msg }}</a>           

複制