路由传参,大佬们你们想怎样传就怎么传,各种姿势
- 这种方式是最直接的,直接url像平常一样拼接,完全在url上显示,刷新地址栏,参数依然在
- 这种方式最易操作,简单粗暴,并且后续使用
window.history.pushState的话也好操作
方法一
router.push(`/register-proc?area=A&machine_type=new`);
- 传递参数可以传对象
- 刷新地址栏,传递参数不丢失
方法二
history.push({pathname:"/register-proc", state:{area: A, machine_type: new}});
- 参数地址栏不显示
- 刷新地址栏,传递的参数会丢失!
方法三
<Link to={{ pathname: '/list', query: {name: 'dragon'}}}>跳转列表页面</Link>
this.props.history.push({ pathname: '/list', query: { name: 'dragon' } })
经常用到,经常忘记,经常查找,索性记录下来,以后就直接Ctrl+c, Ctrl+v,牛逼
- 就这样,拿全部参数或拿指定单个参数都可以
跳转页面后,主要目的取得URL上的参数,然后改变URL,不想让别人看到有带参数到url上(WC,就算你替换的再快,也逃不过我的眼睛,牛叉)
pushState()或者replaceState()
- window.history.pushState('', '', window.location.origin+window.location.pathname) , 最终结果就是
http://localhost:8000/akmmv/ldr/register-proc - 前面2个参数大多数
直接置空"",一个state对象,一个title参数 - 参考文章:newsn.net/say/history…
结语
前端react QQ群:
788023830----React/Redux - 地下老英雄前端交流 QQ群:
249620372----FRONT-END-JS前端(我们的宗旨是,为了加班,为了秃顶……,仰望大佬),希望小伙伴们加群一起学习