Ant Design Pro 学习之跳页传参

阿里粑粑开源的管理框架Ant Design Pro使用记录之跳页传参。

简书地址

偷盗别人老动成果，要侵权了。
这是同事总结的跳页场景传参的形式。

umi - router / link 用法

import Link from 'umi/link';

/* 普通使用 */

<Link to="/list">Go to list page</Link>

/* 带参数 */

<Link to="/list?a=b">Go to list page</Link>

/* 包含子组件 */

<Link to="/list?a=b"><button>Go to list page</button></Link>

umi/router

router.push(path)

推一个新的页面到 history 里。

import router from 'umi/router';

// 普通跳转，不带参数

router.push('/list');

// 带参数

router.push('/list?a=b');

// 带参数，并且参数会显示在url中

router.push({

  pathname: '/list',

  query: {

    a: 'b',

  },

});

// 带参数，但是参数不会显示在url中

router.push({

  pathname: '/list',

  state: { // state字段可以自定义，如用params等也可以

    a: 'b',

  },

});

list页面对参数的接收取值：

const { location: { query, state } } = this.props;**

console.log(query.a, state.a);**

router.replace(path)

替换当前页面，参数和 router.push() 相同。

router.go(n)

往前或往后跳指定页数。

router.goBack()

后退一页。