vue-router跳轉(zhuǎn)時(shí)打開新頁(yè)面的兩種方法
最近還是在痛苦的掙扎中
掙扎吧
記錄一下在vue項(xiàng)目中如何實(shí)現(xiàn)跳轉(zhuǎn)到一個(gè)新頁(yè)面（一個(gè)比較簡(jiǎn)單又比較基礎(chǔ)的問(wèn)題了），有兩個(gè)方法：
1、<vue-link>標(biāo)簽實(shí)現(xiàn)新窗口打開
官方文檔中說(shuō) v-link 指令被 <router-link> 組件指令替代，且 <router-link> 不支持 target="_blank" 屬性，如果需要打開一個(gè)新窗口必須要用<a>標(biāo)簽，但事實(shí)上vue2版本的 <router-link> 是支持 target="_blank" 屬性的(tag="a")，如下：
<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新頁(yè)面打開home頁(yè)</router-link>
2、編程式導(dǎo)航
有些時(shí)候需要在單擊事件或者在函數(shù)中實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，那么可以借助router的示例方法，通過(guò)編寫代碼實(shí)現(xiàn)。我們常用的是 $router.push 和 $router.go 但是vue2.0以后，這種方式就不支持新窗口打開的屬性了，這個(gè)時(shí)候就需要使用this.$router.resolve,如下：
seeShare(){
let routeUrl = this.$router.resolve({
path: "/share",
query: {id:96}
});
window.open(routeUrl.href, '_blank');
}
何時(shí)成為大佬
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
el-form-item?prop屬性動(dòng)態(tài)綁定不生效問(wèn)題及解決
這篇文章主要介紹了el-form-item?prop屬性動(dòng)態(tài)綁定不生效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue中v-html妙用及空白行消除方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue如何為GET或POST請(qǐng)求設(shè)置請(qǐng)求頭
這篇文章主要介紹了Vue如何為GET或POST請(qǐng)求設(shè)置請(qǐng)求頭，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue仿攜程輪播圖效果(滑動(dòng)輪播,下方高度自適應(yīng))
這篇文章主要介紹了vue仿攜程輪播圖效果（滑動(dòng)輪播,下方高度自適應(yīng)）,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
今天小編就為大家分享一篇關(guān)于Vuex中的State使用介紹，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
Vue.js教程之a(chǎn)xios與網(wǎng)絡(luò)傳輸?shù)膶W(xué)習(xí)實(shí)踐
這篇文章主要給大家介紹了Vue.js之a(chǎn)xios與網(wǎng)絡(luò)傳輸?shù)南嚓P(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟隨小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-04-04
這篇文章主要為大家詳細(xì)介紹了vue組件父子間通信之綜合練習(xí)聊天室制作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue使用axios實(shí)現(xiàn)excel文件下載的功能
這篇文章主要介紹了vue中使用axios實(shí)現(xiàn)excel文件下載的功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
Vue項(xiàng)目中解決數(shù)字精度丟失問(wèn)題
我們知道,浮點(diǎn)類型的數(shù)據(jù),在計(jì)算機(jī)中是以二進(jìn)制的方式存儲(chǔ)的,但是表示的數(shù)據(jù)也有個(gè)上限和下限,當(dāng)超過(guò)限制?,在計(jì)算機(jī)上顯示只能取最接近的限值,?數(shù)字解析精度丟失說(shuō)的就是這個(gè)現(xiàn)象,所以本文給大家介紹了Vue項(xiàng)目中解決數(shù)字精度丟失問(wèn)題的解決,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue 中使用 CSS Modules優(yōu)雅方法,本文文字結(jié)合實(shí)例代碼的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-04-04