我要實(shí)現(xiàn)的功能是打開(kāi)一個(gè)新窗口用來(lái)展示新頁(yè)面，而且需要傳參數(shù)，并且參數(shù)不能顯示在地址欄里面，而且當(dāng)我刷新頁(yè)面的時(shí)候，傳過(guò)來(lái)的參數(shù)不能丟失，要一直存在，除非我手動(dòng)關(guān)閉這個(gè)新窗口，即瀏覽器的標(biāo)簽頁(yè)。

通過(guò)面向百度編程，發(fā)現(xiàn)網(wǎng)上的根本達(dá)不到這個(gè)效果，而且還都是坑，明明實(shí)現(xiàn)不了，還若有其事的寫(xiě)出來(lái)，于是我在標(biāo)題特意加上有圖有真相，誠(chéng)我不欺，實(shí)現(xiàn)不了功能，就不要出來(lái)糊弄人。

先把我做好的代碼寫(xiě)出來(lái)，后面再介紹別人實(shí)現(xiàn)不了的坑，以及這方面相關(guān)要注意的。

打開(kāi)新窗口并傳參代碼

//打開(kāi)新窗口并傳參，參數(shù)不能顯示在地址欄里面，不關(guān)閉窗口一直刷新，參數(shù)一直有效
handleWindow() {
 //主要實(shí)現(xiàn)打開(kāi)新窗口的功能
 var route = this.$router.resolve({
 name: 'Xterm',
 })
 //主要實(shí)現(xiàn)存儲(chǔ)參數(shù)的功能
 sessionStorage.setItem("ip", "1.1.1.1");
 
 window.open(route.href, '_blank')
}

我的路由配置，也貼出來(lái)好了

{
 path: '/xterm',
 hidden: true,
 component: () => import('@/views/monitor/xterm/index'),
 name: 'Xterm',
},

現(xiàn)在是頁(yè)面接收參數(shù)

//vue的初始化方法，頁(yè)面一初始化，就去拿參數(shù)
created() {
 alert(sessionStorage.getItem("ip"));
 this.ip = sessionStorage.getItem("ip")
},

貼個(gè)真相圖

這是通過(guò)vue的 打開(kāi)新窗口，通過(guò)sessionStorage傳參拿參數(shù)。為什么只能這么做，才能實(shí)現(xiàn)這個(gè)功能，下面我講一下我的踩坑歷程。群眾里有壞人，拿個(gè)假代碼來(lái)網(wǎng)絡(luò)上騙人，哪個(gè)碼農(nóng)經(jīng)不起這樣的考驗(yàn)？

首先這個(gè)功能需要打開(kāi)新窗口，那么方式有如下3種；

第一種：通過(guò)<router-link>標(biāo)簽，這種標(biāo)簽的寫(xiě)法我個(gè)人很不中意，對(duì)于簡(jiǎn)單的業(yè)務(wù)場(chǎng)景還勉強(qiáng)可以，但是我要處理一堆業(yè)務(wù)，很多個(gè)參數(shù)的，這種標(biāo)簽的寫(xiě)法很不利于業(yè)務(wù)拓展。直接排除，OUT！

第二種：通過(guò)router.replace方法，這種方法的打開(kāi)窗口，是把當(dāng)前A頁(yè)面替換成要跳轉(zhuǎn)過(guò)去的B頁(yè)面，我打開(kāi)新窗口是想看新東西，這倒好，直接讓我之前的頁(yè)面沒(méi)了，這不操蛋嘛？在我實(shí)驗(yàn)過(guò)后，OUT！

第三種：通過(guò)router.resolve方法，這就是打開(kāi)新窗口，不影響當(dāng)前A頁(yè)面，直接打開(kāi)一個(gè)瀏覽器標(biāo)簽頁(yè)，我可以通過(guò)來(lái)回切換標(biāo)簽頁(yè)，來(lái)看兩個(gè)頁(yè)面的信息數(shù)據(jù)。這很nice，我中意，就是這個(gè)了。

順帶介紹一下，vue2.0以后，為了和日漸流行的HTML5保持一致，router.go和router.push就不支持新窗口打開(kāi)的屬性，router.go被用來(lái)當(dāng)做前進(jìn)后退了； router.push被用來(lái)當(dāng)做導(dǎo)向特殊頁(yè)面， 這個(gè)跳轉(zhuǎn)，不會(huì)打開(kāi)新窗口，有history功能，如果你一個(gè)窗口有多標(biāo)簽頁(yè)的話，可以用這個(gè)來(lái)開(kāi)多個(gè)，如圖所示；

好了，使用router.resolve，我們可以跳轉(zhuǎn)到新窗口里，那么現(xiàn)在就開(kāi)始傳參了，這就到了坑爹的地方了。按照網(wǎng)上的搬運(yùn)來(lái)看，主要是如下兩種傳參；

//測(cè)試第一種傳參
testA (aaa) {
 const route = this.$router.resolve({
   name: 'Xterm', 
   params: {
     ip: aaa
   }
 })
 window.open(route.href,'_blank')
}

//測(cè)試第二種傳參
testA (bbb) {
 const route = this.$router.resolve({
   path: '/xterm', 
   query: {
     ip: bbb
   }
 })
 window.open(route.href,'_blank')
}

對(duì)應(yīng)的接收參數(shù)，如下所示；

created() {
 //測(cè)試第一種接參
 this.ip = this.$route.params.ip
 //測(cè)試第二種接參
 this.ip = this.$route.query.ip
},

測(cè)試的結(jié)果是，第一種永遠(yuǎn)拿不到值，第二種地址欄里暴露了傳遞的各項(xiàng)參數(shù)值。即使第一種經(jīng)過(guò)種種特殊處理，最好的結(jié)果也只是第一次拿到值，再刷新一下頁(yè)面，值就丟失了，這怎么行？誰(shuí)能保證用戶不會(huì)覺(jué)得有點(diǎn)卡，然后順手去點(diǎn)了刷新按鈕。這種在router.push里面?zhèn)鲄⑹且稽c(diǎn)問(wèn)題都沒(méi)有，都能接收到，區(qū)別就是name+params組合，參數(shù)不會(huì)在地址欄里面，刷新后數(shù)據(jù)會(huì)消失；path+query組合傳參，參數(shù)會(huì)在地址欄里面，無(wú)論怎么刷新頁(yè)面，值會(huì)一直在。估計(jì)是用push試了以后，理所當(dāng)然的覺(jué)得resolve也一樣，我看好多博客里寫(xiě)的不通過(guò)地址欄傳參，使用第一種傳參，然后壓根成功不了，還點(diǎn)擊量賊高，欲哭無(wú)淚啊。

沒(méi)辦法，只能自己動(dòng)手了，找了找緩存啥的，發(fā)現(xiàn)localStorage 和 sessionStorage 屬性，sessionStorage 用于臨時(shí)保存數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁(yè)之后將會(huì)刪除這些數(shù)據(jù)；localStorage 用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間，直到手動(dòng)去刪除。顯而易見(jiàn)，sessionStorage 就可以了。

支持這倆屬性的瀏覽器版本如下所示；

至此，其實(shí)問(wèn)題就得到解決了，其實(shí)，也不復(fù)雜，就是網(wǎng)上答案良莠不齊，記錄一下，以供他人使用。

總結(jié)

到此這篇關(guān)于vue打開(kāi)新窗口并實(shí)現(xiàn)傳參的文章就介紹到這了,更多相關(guān)vue打開(kāi)新窗口傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論