Umi路由跳转传参方式都有哪些?

在 UmiJS 中,有多种方式可以进行路由跳转并传递参数。下面是一些常见的方式:

1. Path 参数:

使用 path 参数是最常见的方式之一。你可以在路由定义的 path 中使用占位符,然后在跳转时将实际的参数传递给该占位符。
例如,定义一个带有参数的路由:

{
  path: '/user/:id',
  component: '@/pages/user',
}

在代码中进行跳转并传递参数:

history.push('/user/123'); // 传递参数 123

在 user 组件中,可以通过 history.location.params 获取路由参数。

2. Query 参数:

使用查询参数是另一种常见的方式。你可以在跳转时将参数作为查询字符串添加到 URL 中,然后在目标页面通过 location.query 获取参数。
例如,进行跳转并传递参数:

history.push('/user?id=123'); // 传递参数 123

在 user 组件中,可以通过 location.query.id 获取参数。

3. State 参数:

使用 state 参数是一种将数据传递给路由的方式。你可以在跳转时将数据作为 state 参数传递给目标页面,然后在目标页面通过 location.state 获取参数。
例如,进行跳转并传递参数:

history.push('/user', { id: 123 }); // 传递参数 123

在 user 组件中,可以通过 location.state.id 获取参数。

这些是 UmiJS 中常用的路由跳转并传递参数的方式。你可以根据具体的需求选择适合的方式来进行参数传递。无论哪种方式,都能够实现数据在页面之间的传递和共享。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值