vue如何在新窗口打開頁面
vue在新窗口打開頁面
有時候后我們會需要在一個新窗口打開頁面，而我們都知道，vue是單頁面的應(yīng)用，通過router在內(nèi)部跳轉(zhuǎn)的。
但是依然有辦法實現(xiàn)這個需求。
剛開始在網(wǎng)上找了一下，有兩種方式，一種是給outer-link標簽添加tag=a跳轉(zhuǎn)打開新窗口，親測有效。
<router-link tag="a" target="_blank" :to="{name:'detail',query:{goodsId:'1111'}}">熱門好貨</router-link>再一種就是通過router來實現(xiàn)，使用resolve方法將路徑轉(zhuǎn)換出來，window來打開
let routeData = this.$router.resolve({
name: "detail",
query: {goodsId:'1111'}
});
window.open(routeData.href, '_blank');但是我按這種方式寫的時候，卻跳轉(zhuǎn)到根路徑去了
路由配置
{
path: '/home/integral-record',
component: IntegralRecord,
meta: {
hasMaster: true,
name: '積分變更記錄'
}
}按理說routeData.href應(yīng)該是/home/integral-record才對
但實際打印出來的卻是/shop/
這就導(dǎo)致跳轉(zhuǎn)到了首頁去，這顯然不是我想要的，暫時沒找到原因。但是當我們一定想要用路由跳轉(zhuǎn)的時候怎么辦呢？
我們小組長找到了一個方法：
給a標簽動態(tài)設(shè)置href路徑，然后主動觸發(fā)click事件來跳轉(zhuǎn)。親測有效
就是在頁面添加一個a標簽，款高設(shè)為零或者隱藏，只要看不到就行，設(shè)置好target屬性為_blank，href設(shè)為空
<a class="target" href="" target=" rel="external nofollow" _blank"></a>
給目標元素綁定@click=“test”事件，當點擊目標元素的時候觸發(fā)：
test() {
let target = this.$refs.target
target.setAttribute('href', window.location.origin + '/home/integral-record')
target.click()
}這樣就成功在新窗口打開了頁面。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue3之事件綁定的實現(xiàn)邏輯,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue?elementui二次封裝el-table帶插槽問題
這篇文章主要介紹了vue?elementui二次封裝el-table帶插槽問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了兩種在Vue3項目中給組件命名的方法：原生的export default方式和使用vite-plugin-vue-setup-extend插件的方式,通過代碼介紹的非常詳細,需要的朋友可以參考下2026-04-04
在 Vue Router 中,你可以使用滾動行為來定義路由切換時頁面滾動的行為,本文就詳細的介紹一下Vue-Router滾動行為的具體使用,感興趣的可以了解一下2023-08-08
本文主要介紹了element table多層嵌套顯示的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
VUE3中Element table表頭動態(tài)展示合計信息
本文主要介紹了在Vue中實現(xiàn)動態(tài)合計兩個字段并輸出摘要信息的方法,通過使用監(jiān)聽器和深度監(jiān)聽,確保當數(shù)據(jù)變化時能正確更新合計結(jié)果,具有一定的參考價值,感興趣的可以了解一下2024-11-11
vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳解
這篇文章主要給大家介紹了關(guān)于vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳?shù)南嚓P(guān)資料,Naive?UI是一個基于Typescript開發(fā)的針對Vue3開發(fā)的UI組件庫,由TuSimple(圖森未來)公司開發(fā)并開源,需要的朋友可以參考下2023-08-08
Vue 動態(tài)設(shè)置路由參數(shù)的案例分析
這篇文章主要介紹了Vue 動態(tài)設(shè)置路由參數(shù)的案例分析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
Vue.js每天必學之組件與組件間的通信,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
el-input設(shè)置后綴顯示單位并阻止?jié)L輪微調(diào)的解決方法
在Element UI或Element Plus中,使用el-input組件時,可以通過suffix插槽添加單位顯示,如果設(shè)置了type為'number',滾輪滾動可能會導(dǎo)致數(shù)值微調(diào),解決方法是阻止?jié)L輪事件的默認行為,并用CSS隱藏掉輸入框的上下箭頭,確保數(shù)值輸入的準確性,這樣既美觀又提升了用戶體驗2024-09-09