vue開啟新視窗並且實現傳參，有圖有真相

lgx211發表於2021-03-04
Vue

我要實現的功能是開啟一個新視窗用來展示新頁面，而且需要傳引數，並且引數不能顯示在位址列裡面，而且當我重新整理頁面的時候，傳過來的引數不能丟失，要一直存在，除非我手動關閉這個新視窗，即瀏覽器的標籤頁。

通過面向百度程式設計，發現網上的根本達不到這個效果，而且還都是坑，明明實現不了，還若有其事的寫出來，於是我在標題特意加上有圖有真相，誠我不欺，實現不了功能，就不要出來糊弄人。

先把我做好的程式碼寫出來，後面再介紹別人實現不了的坑，以及這方面相關要注意的。

開啟新視窗並傳參程式碼

//開啟新視窗並傳參，引數不能顯示在位址列裡面，不關閉視窗一直重新整理，引數一直有效
handleWindow() {
  //主要實現開啟新視窗的功能
  var route = this.$router.resolve({
    name: 'Xterm',
  })
  //主要實現儲存引數的功能
  sessionStorage.setItem("ip", "1.1.1.1");
  
  window.open(route.href, '_blank')
}

我的路由配置，也貼出來好了

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

現在是頁面接收引數

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

貼個真相圖

lgx211

這是通過vue的 開啟新視窗，通過sessionStorage傳參拿引數。為什麼只能這麼做，才能實現這個功能，下面我講一下我的踩坑歷程。群眾裡有壞人，拿個假程式碼來網路上騙人，哪個碼農經不起這樣的考驗？

首先這個功能需要開啟新視窗，那麼方式有如下3種；

第一種：通過<router-link>標籤，這種標籤的寫法我個人很不中意，對於簡單的業務場景還勉強可以，但是我要處理一堆業務，很多個引數的，這種標籤的寫法很不利於業務擴充。直接排除，OUT！

第二種：通過router.replace方法，這種方法的開啟視窗，是把當前A頁面替換成要跳轉過去的B頁面，我開啟新視窗是想看新東西，這倒好，直接讓我之前的頁面沒了，這不操蛋嘛？在我實驗過後，OUT！

第三種：通過router.resolve方法，這就是開啟新視窗，不影響當前A頁面，直接開啟一個瀏覽器標籤頁，我可以通過來回切換標籤頁，來看兩個頁面的資訊資料。這很nice，我中意，就是這個了。

順帶介紹一下，vue2.0以後，為了和日漸流行的HTML5保持一致，router.go和router.push就不支援新視窗開啟的屬性，router.go被用來當做前進後退了； router.push被用來當做導向特殊頁面， 這個跳轉，不會開啟新視窗，有history功能，如果你一個視窗有多標籤頁的話，可以用這個來開多個，如圖所示；

lgx211

好了，使用router.resolve，我們可以跳轉到新視窗裡，那麼現在就開始傳參了，這就到了坑爹的地方了。按照網上的搬運來看，主要是如下兩種傳參；

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

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

對應的接收引數，如下所示；

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

測試的結果是，第一種永遠拿不到值，第二種位址列裡暴露了傳遞的各項引數值。即使第一種經過種種特殊處理，最好的結果也只是第一次拿到值，再重新整理一下頁面，值就丟失了，這怎麼行？誰能保證使用者不會覺得有點卡，然後順手去點了重新整理按鈕。這種在router.push裡面傳參是一點問題都沒有，都能接收到，區別就是name+params組合，引數不會在位址列裡面，重新整理後資料會消失；path+query組合傳參，引數會在位址列裡面，無論怎麼重新整理頁面，值會一直在。估計是用push試了以後，理所當然的覺得resolve也一樣，我看好多部落格裡寫的不通過位址列傳參，使用第一種傳參，然後壓根成功不了，還點選量賊高，欲哭無淚啊。

沒辦法，只能自己動手了，找了找快取啥的，發現localStorage 和 sessionStorage 屬性，sessionStorage 用於臨時儲存資料，在關閉視窗或標籤頁之後將會刪除這些資料；localStorage 用於長久儲存整個網站的資料，儲存的資料沒有過期時間，直到手動去刪除。顯而易見，sessionStorage 就可以了。

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

lgx211

至此，其實問題就得到解決了，其實，也不復雜，就是網上答案良莠不齊，記錄一下，以供他人使用。

未覺池塘春草夢，階前梧葉已秋聲。

相關文章