vue router 跳轉(zhuǎn)時(shí)打開(kāi)新頁(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)新窗口打開(kāi)
官方文檔中說(shuō) v-link 指令被 <router-link> 組件指令替代，且 <router-link> 不支持 target="_blank" 屬性，如果需要打開(kāi)一個(gè)新窗口必須要用 <a> 標(biāo)簽，但事實(shí)上vue2版本的 <router-link> 是支持 target="_blank" 屬性的(tag="a")，如下：
<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新頁(yè)面打開(kāi)home頁(yè)</router-link>
2、編程式導(dǎo)航
有些時(shí)候需要在單擊事件或者在函數(shù)中實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，那么可以借助router的示例方法，通過(guò)編寫(xiě)代碼實(shí)現(xiàn)。我們常用的是 $router.push 和 $router.go 但是vue2.0以后，這種方式就不支持新窗口打開(kāi)的屬性了，這個(gè)時(shí)候就需要使用this.$router.resolve,如下：
seeShare(){
let routeUrl = this.$router.resolve({
path: "/share",
query: {id:96}
});
window.open(routeUrl.href, '_blank');
}
總結(jié)
以上所述是小編給大家介紹的vue router 跳轉(zhuǎn)時(shí)打開(kāi)新頁(yè)面的示例方法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何使用vue3實(shí)現(xiàn)一個(gè)高德地圖天氣小組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
簡(jiǎn)單的vue-resourse獲取json并應(yīng)用到模板示例
本篇文章主要介紹了簡(jiǎn)單的vue-resourse獲取json并應(yīng)用到模板示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-02-02
Vue中路由參數(shù)與查詢參數(shù)傳遞對(duì)比解析
在Vue.js中，路由與導(dǎo)航不僅涉及頁(yè)面切換，還包括了向頁(yè)面?zhèn)鬟f參數(shù)和獲取查詢參數(shù)，這篇文章主要介紹了Vue路由參數(shù)與查詢參數(shù)傳遞,需要的朋友可以參考下2023-08-08
Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了Vue getter setter，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue 2.5 Level E 已發(fā)布，在原來(lái)2.x的基礎(chǔ)上做了很多相應(yīng)改進(jìn)和對(duì) bug 的修復(fù)，目前 2.5 系列最新的版本為 2.5.2，本文給大家介紹vue 2.5 新特征，需要的朋友參考下吧2017-10-10
詳解Vue自定義過(guò)濾器的實(shí)現(xiàn)
這篇文章主要介紹了詳解Vue自定義過(guò)濾器的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。2017-01-01
vue+elementUI的表格最后一行合計(jì)自定義顯示方式
這篇文章主要介紹了vue+elementUI的表格最后一行合計(jì)自定義顯示方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
在本篇內(nèi)容中小編給大家分享了關(guān)于Vue中使用canvas方法和步驟，對(duì)此有需要的讀者們參考學(xué)習(xí)下。2019-02-02
vue.js圖片轉(zhuǎn)Base64上傳圖片并預(yù)覽的實(shí)現(xiàn)方法
這篇文章主要介紹了vue.js圖片轉(zhuǎn)Base64上傳圖片并預(yù)覽的實(shí)現(xiàn)方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08