vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實現(xiàn)代碼
vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面
使用場景:我在做一個調(diào)用虛擬機錄屏的一個操作,需要在瀏覽器頁面上,點擊按鈕后,關(guān)閉當(dāng)前頁面里的某一個頁面,并且打開瀏覽器新頁面是虛擬機的頁面,訪問的是后端返回來的地址
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方法,每次進入頁面都會執(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue前端實現(xiàn)dhtmlxgantt甘特圖代碼示例(個人需求)
這篇文章主要介紹了如何使用dhtmlx-gantt和chinese-days插件在項目中實現(xiàn)節(jié)假日置灰顯示的功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03vue-loader和webpack項目配置及npm錯誤問題的解決
這篇文章主要介紹了vue-loader和webpack項目配置及npm錯誤問題的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07vue實現(xiàn)播放后端flask發(fā)送的mp3文件
這篇文章主要為大家詳細(xì)介紹了vue如何實現(xiàn)播放后端flask發(fā)送的mp3文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01