vue如何在新窗口打開頁面
vue在新窗口打開頁面
有時候后我們會需要在一個新窗口打開頁面，而我們都知道，vue是單頁面的應用，通過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應該是/home/integral-record才對
但實際打印出來的卻是/shop/
這就導致跳轉(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)文章
這篇文章主要介紹了uniapp中uni-load-more的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
vue3+elementPlus項目支持設(shè)置默認附件方式
這篇文章主要介紹了vue3+elementPlus項目支持設(shè)置默認附件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇博客針對axios庫的核心代碼做一個簡要總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
springboot之springboot與netty整合方案
這篇文章主要介紹了VUE之關(guān)于store狀態(tài)管理核心解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue element el-table-column中對日期進行格式化方式(全局過濾器)
這篇文章主要介紹了Vue element el-table-column中對日期進行格式化方式(全局過濾器)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
v-if根據(jù)表達式的真假，切換元素的顯示和隱藏操作DOM元素，這篇文章主要介紹了vue中的v-if基本使用,需要的朋友可以參考下2022-12-12
本文通過實例代碼給大家介紹了vue 圖標選擇器的相關(guān)知識，圖文實例代碼相結(jié)合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-11-11
vue開發(fā)利器之unplugin-auto-import的使用
unplugin-auto-import 解決了vue3-hook、vue-router、useVue等多個插件的自動導入,也支持自定義插件的自動導入,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)利器之unplugin-auto-import使用的相關(guān)資料,需要的朋友可以參考下2023-02-02
Vue?ElementUI在el-table中使用el-popover問題
這篇文章主要介紹了Vue?ElementUI在el-table中使用el-popover問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Ant Design的Table組件去除“取消排序”選項操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10