vue-router跳轉(zhuǎn)時(shí)打開新頁面的兩種方法
最近還是在痛苦的掙扎中
掙扎吧
記錄一下在vue項(xiàng)目中如何實(shí)現(xiàn)跳轉(zhuǎn)到一個(gè)新頁面（一個(gè)比較簡單又比較基礎(chǔ)的問題了），有兩個(gè)方法：
1、<vue-link>標(biāo)簽實(shí)現(xiàn)新窗口打開
官方文檔中說 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'}}">新頁面打開home頁</router-link>
2、編程式導(dǎo)航
有些時(shí)候需要在單擊事件或者在函數(shù)中實(shí)現(xiàn)頁面跳轉(zhuǎn)，那么可以借助router的示例方法，通過編寫代碼實(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é)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對腳本之家的支持。
相關(guān)文章
vue+jquery+lodash實(shí)現(xiàn)滑動(dòng)時(shí)頂部懸浮固定效果
這篇文章主要為大家詳細(xì)介紹了vue+jquery+lodash實(shí)現(xiàn)滑動(dòng)時(shí)頂部懸浮固定效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
mixins是一種分發(fā) Vue 組件中可復(fù)用功能的使用方式,它是一個(gè) js 對象,包含我們組件script中的任意功能選項(xiàng),下面就跟隨小編一起來看看它的具體使用吧2024-03-03
這篇文章主要介紹了vue3.0中setup使用，本文通過兩種用法給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12
默認(rèn)瀏覽器設(shè)置及vue自動(dòng)打開頁面的方法
今天小編就為大家分享一篇默認(rèn)瀏覽器設(shè)置及vue自動(dòng)打開頁面的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
深入探索VueJS Scoped CSS 實(shí)現(xiàn)原理
這篇文章主要介紹了深入探索VueJS Scoped CSS 實(shí)現(xiàn)原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了Vue生命周期和數(shù)據(jù)共享，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue3公布曾經(jīng)有一段時(shí)間了,它采納了新的響應(yīng)式零碎,而且構(gòu)建了一套全新的 Composition API,下面這篇文章主要給大家介紹了關(guān)于Vue3新狀態(tài)管理工具的相關(guān)資料,需要的朋友可以參考下2022-03-03
使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法
這篇文章主要介紹了使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
使用keep-alive時(shí),數(shù)據(jù)無法刷新的問題及解決
這篇文章主要介紹了使用keep-alive時(shí),數(shù)據(jù)無法刷新的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
基于vue 實(shí)現(xiàn)表單中password輸入的顯示與隱藏功能
這篇文章主要介紹了vue 實(shí)現(xiàn)表單中password輸入的顯示與隱藏功能 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07