Vue Router 中實如今新窗口打開頁面

本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！

1. < router-link > 標籤實現新窗口打開

官方文檔中說 v-link 指令被 < router-link > 組件指令替代，且 < router-link > 不支持 target="_blank" 屬性，若是須要打開一個新窗口必需要用< a >標籤，但事實上vue2版本的 < router-link > 是支持 target="_blank" 屬性的 (tag="a")。

<router-link target="_blank" :to="{path:'/about',query:{id:deviceId}}">關於</router-link>

<script> export default { data(){ return{ deviceId:'123456' } } } </script>
複製代碼

2. 編程式導航

有些時候須要在單擊事件或者在函數中實現頁面跳轉，那麼能夠藉助 router 的示例方法，經過編寫代碼實現。咱們經常使用的是 $router.push 和$ router.go 可是 vue2.0 之後，這種方式就不支持新窗口打開的屬性了，這個時候就須要使用this.$router.resolve。

<button @click="gotest1">按鈕</button>

gotest1(){
   let deviceId = '56789'
   let routeData = this.$router.resolve({
      query: {id:deviceId},
      path:'/test1'
   });
   window.open(routeData.href, '_blank');
}
複製代碼