美文网首页
Ant Design Pro 学习之跳页传参

Ant Design Pro 学习之跳页传参

作者: 小马将过河 | 来源:发表于2019-03-24 23:46 被阅读0次

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

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()

后退一页。

相关文章

网友评论

      本文标题:Ant Design Pro 学习之跳页传参

      本文链接:https://www.haomeiwen.com/subject/oyhmvqtx.html