vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實(shí)現(xiàn)代碼
vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面
使用場(chǎng)景:我在做一個(gè)調(diào)用虛擬機(jī)錄屏的一個(gè)操作,需要在瀏覽器頁面上,點(diǎn)擊按鈕后,關(guān)閉當(dāng)前頁面里的某一個(gè)頁面,并且打開瀏覽器新頁面是虛擬機(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}`) //打開新頁面,不會(huì)覆蓋當(dāng)前頁面
注意,我這里是從 this.$store.state.app.tagNavList 一層一層找的,你也可以全局寫一下
2.像這種頁面的關(guān)閉,不是直接關(guān)閉瀏覽器頁面
vue跳轉(zhuǎn)到其它頁面時(shí)同時(shí)關(guān)閉當(dāng)前頁面
this.$router.push({ path: '/outlet-inits-initSheetYJ', }) //vue跳轉(zhuǎn)到其它頁面時(shí)同時(shí)關(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)入頁面都會(huì)執(zhí)行 activated() { this.searchBtn() },
到此這篇關(guān)于vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的文章就介紹到這了,更多相關(guān)vue跳轉(zhuǎn)關(guān)閉當(dāng)前頁面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue 倒計(jì)時(shí)結(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)三級(jí)頁面跳轉(zhuǎn)功能
- vue3頁面跳轉(zhuǎn)的兩種方式
- vue3 setup點(diǎn)擊跳轉(zhuǎn)頁面的實(shí)現(xiàn)示例
相關(guān)文章
vue前端實(shí)現(xiàn)dhtmlxgantt甘特圖代碼示例(個(gè)人需求)
這篇文章主要介紹了如何使用dhtmlx-gantt和chinese-days插件在項(xiàng)目中實(shí)現(xiàn)節(jié)假日置灰顯示的功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤問題的解決
這篇文章主要介紹了vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤問題的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07vue?electron實(shí)現(xiàn)無邊框窗口示例詳解
這篇文章主要為大家介紹了vue?electron實(shí)現(xiàn)無邊框窗口示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue實(shí)現(xiàn)播放后端flask發(fā)送的mp3文件
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)播放后端flask發(fā)送的mp3文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01