----vue-router 如何在新窗口打開頁面----


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:'/home',query:{id:'1'}}">新頁面打開home頁</router-link>

2、編程式導航:

有些時候需要在單擊事件或者在函數中實現頁面跳轉,那么可以借助router的示例方法,通過編寫代碼實現。我們常用的是 $router.push 和 $router.go 但是vue2.0以后,這種方式就不支持新窗口打開的屬性了,這個時候就需要使用this.$router.resolve,如下:

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

當然了,你可以使用query,也可以使用params,具體請參見:https://www.jianshu.com/p/45ee7a6bdc0c 

 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM