在开发过程中,遇到了从一个页面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);