如何打开一个新界面?原生window跳转传一个对象类型如何处理?

例如京东商城,每一个商品再打开时候都会创建一个新的界面,这如何实现的呢?

实现

使用window.open(url)

传输对象参数的问题

出现Unexpected token 'p', "product={%"... is not valid JSON
SyntaxError: Unexpected token 'p', "product={%"... is not valid JSON
    at JSON.parse (<anonymous>)
    at ProductPageView (http://localhost:3000/static/js/src_view_Index_Components_ProductPage_js-node_modules_ant-design_icons_es_icons_ShoppingCartO-a12322.chunk.js:58:12) 
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:56123:22) 
    at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:59003:24) 
    at mountLazyComponent (http://localhost:3000/static/js/bundle.js:59312:21) 
    at beginWork (http://localhost:3000/static/js/bundle.js:60708:20) 
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:45719:18) 
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:45763:20) 
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:45820:35) 
    at beginWork$1 (h

原因

这是由于通过url中""等这种特殊字符会被转译为其他符号,所以需要通过浏览器url地址里的方法转译回来

解决

例如当前这样的JSON传输的跳转

跳转前

    navigator(`/index/productPage?${JSON.stringify(item)}`)

跳转后

1、slice(1)去掉 ?
2、location.search就是从?开始的内容
3、decodeURIComponent转译url编码
4、最后通过JSON.parse变为对象
  const product = JSON.parse(decodeURIComponent(location.search.slice(1)));
  • 9
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值