zoukankan      html  css  js  c++  java
  • 关于不同页面的传参分析

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

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

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

  • 相关阅读:
    PHP静态
    PHP批量删除
    PHP增删改查
    PHP数据访问
    PHP继承和多态
    PHP封装
    PHP字符串处理和正则表达式
    PHP数组
    PHP函数
    PHP基础
  • 原文地址:https://www.cnblogs.com/bllx/p/9271721.html
Copyright © 2011-2022 走看看