vue如何在新窗口打開頁面
vue在新窗口打開頁面
有時(shí)候后我們會(huì)需要在一個(gè)新窗口打開頁面，而我們都知道，vue是單頁面的應(yīng)用，通過router在內(nèi)部跳轉(zhuǎn)的。
但是依然有辦法實(shí)現(xiàn)這個(gè)需求。
剛開始在網(wǎng)上找了一下，有兩種方式，一種是給outer-link標(biāo)簽添加tag=a跳轉(zhuǎn)打開新窗口，親測(cè)有效。
<router-link tag="a" target="_blank" :to="{name:'detail',query:{goodsId:'1111'}}">熱門好貨</router-link>再一種就是通過router來實(shí)現(xiàn)，使用resolve方法將路徑轉(zhuǎn)換出來，window來打開
let routeData = this.$router.resolve({
name: "detail",
query: {goodsId:'1111'}
});
window.open(routeData.href, '_blank');但是我按這種方式寫的時(shí)候，卻跳轉(zhuǎn)到根路徑去了
路由配置
{
path: '/home/integral-record',
component: IntegralRecord,
meta: {
hasMaster: true,
name: '積分變更記錄'
}
}按理說routeData.href應(yīng)該是/home/integral-record才對(duì)
但實(shí)際打印出來的卻是/shop/
這就導(dǎo)致跳轉(zhuǎn)到了首頁去，這顯然不是我想要的，暫時(shí)沒找到原因。但是當(dāng)我們一定想要用路由跳轉(zhuǎn)的時(shí)候怎么辦呢？
我們小組長找到了一個(gè)方法：
給a標(biāo)簽動(dòng)態(tài)設(shè)置href路徑，然后主動(dòng)觸發(fā)click事件來跳轉(zhuǎn)。親測(cè)有效
就是在頁面添加一個(gè)a標(biāo)簽，款高設(shè)為零或者隱藏，只要看不到就行，設(shè)置好target屬性為_blank，href設(shè)為空
<a class="target" href="" target=" rel="external nofollow" _blank"></a>
給目標(biāo)元素綁定@click=“test”事件，當(dāng)點(diǎn)擊目標(biāo)元素的時(shí)候觸發(fā)：
test() {
let target = this.$refs.target
target.setAttribute('href', window.location.origin + '/home/integral-record')
target.click()
}這樣就成功在新窗口打開了頁面。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了uniapp中uni-load-more的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
vue3+elementPlus項(xiàng)目支持設(shè)置默認(rèn)附件方式
這篇文章主要介紹了vue3+elementPlus項(xiàng)目支持設(shè)置默認(rèn)附件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇博客針對(duì)axios庫的核心代碼做一個(gè)簡要總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
springboot之springboot與netty整合方案
這篇文章主要介紹了VUE之關(guān)于store狀態(tài)管理核心解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue element el-table-column中對(duì)日期進(jìn)行格式化方式(全局過濾器)
這篇文章主要介紹了Vue element el-table-column中對(duì)日期進(jìn)行格式化方式(全局過濾器)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
v-if根據(jù)表達(dá)式的真假，切換元素的顯示和隱藏操作DOM元素，這篇文章主要介紹了vue中的v-if基本使用,需要的朋友可以參考下2022-12-12
本文通過實(shí)例代碼給大家介紹了vue 圖標(biāo)選擇器的相關(guān)知識(shí)，圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-11-11
vue開發(fā)利器之unplugin-auto-import的使用
unplugin-auto-import 解決了vue3-hook、vue-router、useVue等多個(gè)插件的自動(dòng)導(dǎo)入,也支持自定義插件的自動(dòng)導(dǎo)入,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)利器之unplugin-auto-import使用的相關(guān)資料,需要的朋友可以參考下2023-02-02
Vue?ElementUI在el-table中使用el-popover問題
這篇文章主要介紹了Vue?ElementUI在el-table中使用el-popover問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Ant Design的Table組件去除“取消排序”選項(xiàng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10