快捷導(dǎo)航

vue 跳轉(zhuǎn)到其他頁(yè)面并關(guān)閉當(dāng)前頁(yè)面的實(shí)現(xiàn)代碼

更新時(shí)間：2023年09月27日 15:33:44 作者：小橘子皮__兜兜

我在做一個(gè)調(diào)用虛擬機(jī)錄屏的一個(gè)操作,需要在瀏覽器頁(yè)面上,點(diǎn)擊按鈕后,關(guān)閉當(dāng)前頁(yè)面里的某一個(gè)頁(yè)面,并且打開瀏覽器新頁(yè)面是虛擬機(jī)的頁(yè)面,本文給大家介紹vue 跳轉(zhuǎn)到其他頁(yè)面并關(guān)閉當(dāng)前頁(yè)面的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧

vue 跳轉(zhuǎn)到其他頁(yè)面并關(guān)閉當(dāng)前頁(yè)面

使用場(chǎng)景：我在做一個(gè)調(diào)用虛擬機(jī)錄屏的一個(gè)操作，需要在瀏覽器頁(yè)面上，點(diǎn)擊按鈕后，關(guān)閉當(dāng)前頁(yè)面里的某一個(gè)頁(yè)面，并且打開瀏覽器新頁(yè)面是虛擬機(jī)的頁(yè)面，訪問(wèn)的是后端返回來(lái)的地址

1.通過(guò)路由跳轉(zhuǎn)，路由關(guān)閉頁(yè)面

   this.$store.state.app.tagNavList = this.$store.state.app.tagNavList.filter(
                  (item) => item.name !== 'webProofAdd'  //需要關(guān)閉的頁(yè)面的名稱
                )
                let tab = this.$store.state.app.tagNavList[
                this.$store.state.app.tagNavList.length - 1
                ]
                //跳轉(zhuǎn)到目標(biāo)頁(yè)面
                this.$router.push({
                  name: tab.name,
                  params: { ...tab.params },
                  query: { ...tab.query },
                })
            //這里我拼了后端返回來(lái)的地址和端口
             window.open(`http://${url}:${vmNovncPort}`) //打開新頁(yè)面，不會(huì)覆蓋當(dāng)前頁(yè)面

注意，我這里是從 this.$store.state.app.tagNavList 一層一層找的，你也可以全局寫一下

2.像這種頁(yè)面的關(guān)閉，不是直接關(guān)閉瀏覽器頁(yè)面

vue跳轉(zhuǎn)到其它頁(yè)面時(shí)同時(shí)關(guān)閉當(dāng)前頁(yè)面

                this.$router.push({
                  path: '/outlet-inits-initSheetYJ',
                })
				//vue跳轉(zhuǎn)到其它頁(yè)面時(shí)同時(shí)關(guān)閉當(dāng)前頁(yè)面
                this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
                  (item) => item.name !== 'outlet-daySheets-daySheetYJ'  //需要關(guān)閉的頁(yè)面的名稱
                )
                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頁(yè)面
activated()此方法相當(dāng)于onshow方法，每次進(jìn)入頁(yè)面都會(huì)執(zhí)行
  activated() {
    this.searchBtn()
  },

到此這篇關(guān)于vue 跳轉(zhuǎn)到其他頁(yè)面并關(guān)閉當(dāng)前頁(yè)面的文章就介紹到這了,更多相關(guān)vue跳轉(zhuǎn)關(guān)閉當(dāng)前頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: