vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實(shí)現(xiàn)代碼
vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面
使用場景:我在做一個調(diào)用虛擬機(jī)錄屏的一個操作,需要在瀏覽器頁面上,點(diǎn)擊按鈕后,關(guān)閉當(dāng)前頁面里的某一個頁面,并且打開瀏覽器新頁面是虛擬機(jī)的頁面,訪問的是后端返回來的地址
1.通過路由跳轉(zhuǎn),路由關(guān)閉頁面
this.$store.state.app.tagNavList = this.$store.state.app.tagNavList.filter(
(item) => item.name !== 'webProofAdd' //需要關(guān)閉的頁面的名稱
)
let tab = this.$store.state.app.tagNavList[
this.$store.state.app.tagNavList.length - 1
]
//跳轉(zhuǎn)到目標(biāo)頁面
this.$router.push({
name: tab.name,
params: { ...tab.params },
query: { ...tab.query },
})
//這里我拼了后端返回來的地址和端口
window.open(`http://${url}:${vmNovncPort}`) //打開新頁面,不會覆蓋當(dāng)前頁面注意,我這里是從 this.$store.state.app.tagNavList 一層一層找的,你也可以全局寫一下
2.像這種頁面的關(guān)閉,不是直接關(guān)閉瀏覽器頁面

vue跳轉(zhuǎn)到其它頁面時同時關(guān)閉當(dāng)前頁面
this.$router.push({
path: '/outlet-inits-initSheetYJ',
})
//vue跳轉(zhuǎn)到其它頁面時同時關(guān)閉當(dāng)前頁面
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
(item) => item.name !== 'outlet-daySheets-daySheetYJ' //需要關(guān)閉的頁面的名稱
)
let tab = this.$store.state.contentTabs[
this.$store.state.contentTabs.length - 1
]
this.$router.push({
name: tab.name,
params: { ...tab.params },
query: { ...tab.query },
})
//initSheetYJ.Vue頁面
activated()此方法相當(dāng)于onshow方法,每次進(jìn)入頁面都會執(zhí)行
activated() {
this.searchBtn()
},到此這篇關(guān)于vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的文章就介紹到這了,更多相關(guān)vue跳轉(zhuǎn)關(guān)閉當(dāng)前頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue 倒計(jì)時結(jié)束跳轉(zhuǎn)頁面實(shí)現(xiàn)代碼
- vue如何跳轉(zhuǎn)到其他頁面
- vue跳轉(zhuǎn)頁面的幾種常用方法代碼示例
- vue實(shí)現(xiàn)頁面跳轉(zhuǎn)和參數(shù)傳遞的兩種方式
- Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的方法總結(jié)
- vue路由跳轉(zhuǎn)到新頁面實(shí)現(xiàn)置頂
- vue實(shí)現(xiàn)三級頁面跳轉(zhuǎn)功能
- vue3頁面跳轉(zhuǎn)的兩種方式
- vue3 setup點(diǎn)擊跳轉(zhuǎn)頁面的實(shí)現(xiàn)示例
相關(guān)文章
解決VUE項(xiàng)目在IIS部署出現(xiàn):Uncaught SyntaxError: Unexpected&n
這篇文章介紹了解決VUE項(xiàng)目在IIS部署出現(xiàn):Uncaught SyntaxError: Unexpected token < 報錯的方法,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue之el-upload使用FormData多文件同時上傳問題
這篇文章主要介紹了vue之el-upload使用FormData多文件同時上傳問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05
ElementUI組件Dialog彈窗再次打開表單仍顯示上次數(shù)據(jù)的問題
這篇文章主要介紹了ElementUI組件Dialog彈窗再次打開表單仍顯示上次數(shù)據(jù)的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04
Element如何實(shí)現(xiàn)loading的方法示例
本文主要介紹了Element如何實(shí)現(xiàn)loading的方法示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue實(shí)現(xiàn)右上角時間顯示實(shí)時刷新
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)右上角時間顯示實(shí)時刷新,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-10-10

