关于不同页面的传参分析

很长时间没写博客了 ,工作忙到也没有时间去整理这段时间遇到的问题。现在可以好好梳理一下了。

这两天在做移动端项目时,遇到了在不同页面传参的事。回顾了一下这几年在项目遇到的页面传参的情况,现在梳理一下。

先说原生js的传参吧。

①可以将参数放到下一个页面的路径后面,通过window.location.search的方式去截取参数。

Window对象的location属性引用的是Location对象,它表示该窗口中当前显示的文档的URL。Location对象包含以下属性: protocol, host, hostname, port, pathname和search。

search: 返回的是问号之后的URL,这部分通常是某种类型的查询字符串。一般来说,这部分内容是用来参数化URL并在其中嵌入参数的。主流浏览器(IE、FireFox、Chrome、Safair、Opera)都支持该属性。

例如:a页面跳转至b页面需要传递一些参数,我们可以将这些参数放在路径中,例如url:http://www.baidu.com?name='amy'&age=10;

在b页面中,可以通过window.location.search的方式获得?后面的参数部分,parames = “name='amy'&age=10“,然后可以根据自己的需要截取字符串。

②在之前做项目时,用到了APICloud框架提供的传参方式。在他们自己封装的方法中,可以将参数作为对象传给下一个页面,原理和第一个相同,我就直接举例了

    api.openWin({ name: 'page1', url: './page1.html', pageParam: { name: 'test' } });这种方式其实也是将参数放在了路径中,在下一个页面,直接获取pageParam即可。

③就是使用框架(angular,vue,react)的router方式。先说一下它的原理吧,原理基本一样。具体的demo会放在gitHub中,有兴趣的可以看一下。其原理和原生js一样。

关于react的页面传参,可以参考 https://blog.csdn.net/qtfying/article/details/77939171 ;https://blog.csdn.net/sinat_17775997/article/details/74679726

关于angular的页面传参,方式还是比较多的,可以选择自带的,可以参考的博客https://www.jianshu.com/p/07cdc478ed0e

关于vue的页面传参,可以参考 https://blog.csdn.net/qq_34109078/article/details/73028611

猜你喜欢

转载自www.cnblogs.com/bllx/p/9271721.html
今日推荐