页面跳转时在URL中传递数组的正解！

在开发过程中，遇到了从一个页面A跳转到另一个页面B，需要在url参数部分传递一些数据给B页面，其中某个参数为数组的需求。上网搜了搜，没有找到可行方法，最后自己研究出来了，给大家分享一下。

本文包含两种数组的传递方法。

一、简易数组

例如在pageA要传递这样一个数据给pageB：

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

在pageA使用该方法进行页面跳转：

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

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

预期能够得到这样的url：

http://localhost:8000/test/pageB?paramA=1¶mB=happy¶mC=['alice', 'bob', 'jack']

结果发现是这样的：

http://localhost:8000/test/pageB?paramA=1¶mB=happy¶mC=alice¶mC=bob¶mC=jack

？？？？哈哈哈哈，是不是很懵？
怎么避免这种情况呢，我们可以绕一圈：
将数组转成字符串，在B页面获取到参数后再转化成数组：

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中的逗号转义成了%2C)：

http://localhost:8000/test/pageB?paramA=1¶mB=happy¶mC=alice%2Cbob%2Cjack

然后在pageB转化成数组即可：

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(','); // 得到想要的数组["alice", "bob", "jack"]

二、对象数组

对于更加复杂的对象数组，就没法像上面一样了，但是思路还是一样的。我们可以将对象整个转化为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);