本文主要是介绍如何打开一个新界面？原生window跳转传一个对象类型如何处理？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
例如京东商城，每一个商品再打开时候都会创建一个新的界面,这如何实现的呢？
- 实现
- 传输对象参数的问题
- 原因
- 解决
- 跳转前
- 跳转后
实现
使用window.open(url)
传输对象参数的问题
出现Unexpected token 'p', "product={%"... is not valid JSON
SyntaxError: Unexpected token 'p', "product={%"... is not valid JSONat 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)));
这篇关于如何打开一个新界面？原生window跳转传一个对象类型如何处理？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
