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