【前端】vue項目 url中傳遞數組參數

    【問題情景】

      我在項目中使用了一個iframe，引入另一個項目，想通過動態修改iframe的src使iframe中的頁面動態展示，在這個過程中，我碰到了一個問題，就是我往url傳遞數組參數的時候，接受到的是[object object]，這使我讀不出我傳遞的參數。但是我百度谷歌了一把，都沒有找到很好的解決方案。下面附上我的解決方案。

    【解決方案】

　　傳遞參數的頁面

let testArray = [{a:1},{b:2},{c:3}];
let testStr = encodeURIComponent(JSON.stringify(footerData));
iframeSrc = "http://www.123.com/#/creditCon?testStr=" + testStr 

　　接收參數的頁面

let testArray = JSON.parse(this.$route.query.footerData)

    【方案解釋】

　　下面來解釋一下這幾行代碼，

　　首先是let一個數組，這個數組是我要傳遞給另一個頁面的參數，如果直接傳就會變成[object object]，所以我們需要通過JSON.stringify(數組)來把這個數組變成一個字符串，把它變成字符串后，如果直接傳遞，正常來說是沒有問題的，但是當我們碰到有特殊符號的時候，比方說我們其中有一個數據是一串網址，那轉換就會遇到問題，所以我們需要使encodeURIComponent()函數把轉換出來的字符串進行編碼，encodeURIComponent()函數可把字符串作為URI 組件進行編碼，該方法不會對 ASCII 字母和數字進行編碼，也不會對這些 ASCII 標點符號進行編碼： - _ . ! ~ * ' ( ) ，這樣我們就能得到我們想要的字符串了。

　　因為我們是把數組變成了字符串傳過去的，所以我們在接收到這個字符串的時候，需要對它進行JSON.parse()轉成我們要的數組。