关于不同页面的传参分析

Posted 2020-12-02 bllx

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

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

先说原生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