在開發(fā)過程中，遇到了從一個頁面A跳轉(zhuǎn)到另一個頁面B，需要在url參數(shù)部分傳遞一些數(shù)據(jù)給B頁面，其中某個參數(shù)為數(shù)組的需求。上網(wǎng)搜了搜，沒有找到可行方法，最后自己研究出來了，給大家分享一下。

本文包含兩種數(shù)組的傳遞方法。

一、簡易數(shù)組

例如在pageA要傳遞這樣一個數(shù)據(jù)給pageB：

const obj= {
    paramA: '1',
    paramB: 'happy',
    paramC: ['alice', 'bob', 'jack'],
};

在pageA使用該方法進(jìn)行頁面跳轉(zhuǎn)：

import { routerRedux } from 'dva/router';
import queryString from 'querystring';

routerRedux.push({
    pathname: `/test/pageB`,
    search: queryString.stringify(obj),
})

預(yù)期能夠得到這樣的url：

http://localhost:8000/test/pageB?paramA=1&paramB=happy&paramC=['alice', 'bob', 'jack']

結(jié)果發(fā)現(xiàn)是這樣的：

http://localhost:8000/test/pageB?paramA=1&paramB=happy&paramC=alice&paramC=bob&paramC=jack

？？？？哈哈哈哈，是不是很懵？
怎么避免這種情況呢，我們可以繞一圈：
將數(shù)組轉(zhuǎn)成字符串，在B頁面獲取到參數(shù)后再轉(zhuǎn)化成數(shù)組：

pageA:
   const obj= {
      paramA: '1',
      paramB: 'happy',
      paramC: ['alice', 'bob', 'jack'].join(), // 得到：alice,bob,jack
    };
    dispatch(
      routerRedux.push({
        pathname: `/test/pageB`,
        search: queryString.stringify(obj),
      })
    );

就能得到一個這樣的(alice,bob,jack中的逗號轉(zhuǎn)義成了%2C)：

http://localhost:8000/test/pageB?paramA=1&paramB=happy&paramC=alice%2Cbob%2Cjack

然后在pageB轉(zhuǎn)化成數(shù)組即可：

const { location: { search } } = this.props;
const searchItem = queryString.parse(search.substring(1)); // {paramA: "1", paramB: "happy", paramC: "alice,bob,jack"}
// substring(1)是為了把 ? 截掉，如果直接queryString.parse(search)得到的會是{?paramA: "1", paramB: "happy", paramC: "alice,bob,jack"}

const paramC = searchItem.paramC.split(','); // 得到想要的數(shù)組["alice", "bob", "jack"]

二、對象數(shù)組

對于更加復(fù)雜的對象數(shù)組，就沒法像上面一樣了，但是思路還是一樣的。我們可以將對象整個轉(zhuǎn)化為json。具體如下：

pageA:
const obj= {
    paramA: '1',
    paramB: 'happy',
    paramC: JSON.stringify([
          {name: 'alice', age: 12},
          {name: 'bob', age: 18},
          {name: 'jack', age: 15},
    ]),
};
dispatch(
   routerRedux.push({
        pathname: `/test/pageB`,
        search: queryString.stringify(obj),
   })
);

pageB:
const { location: { search } } = this.props;
const searchItem = queryString.parse(search.substring(1));
const paramC = JSON.parse(searchItem.paramC);