使用：js 中 url 传参

Location 属性

操作	代码	输出结果
获取 # 号后面的字符串	window.location.hash	#/lingshoustatis/?starttime=2018-11-21&&endtime=2018-11-21
获取 url 协议部分	window.location.protocol	http:
获取 href  属性中 ‘?’后的部分，又称为查询字选集串	window.location.search	"?name=kang&when=2011"
获取端口号	window.location.port	8000
获取整个 url 字符串	window.location.href	http://localhost:8000/bui/#/lingshoustatis/?starttime=2018-11-21&&endtime=2018-11-21
获取对象指定文件名或者路径	window.location.pathname	/bui/
获取 location 或 URL 的 hostname 和 port 号码	window.location.host	localhost:8000

 

获取 URL 方法

function GetQueryString(name){    var after = window.location.hash.split("?")[1];    if(after){      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");      var r = after.match(reg);      if(r != null){          return  decodeURIComponent(r[2]);      }      else {          return null;      }    } }

 

decodeURIComponent() 函数 是对url 进行解析

unescape() 函数可对通过 escape() 编码的字符串进行解码。

 

window.location和document.location互相等价的，可以交换使用

 

location的8个属性都是可读写的，但是只有href与hash的写才有意义。例如改变location.href会重新定位到一个URL，而修改location.hash会跳到当前页面中的anchor(<a id="name">或者<div id="id">等)名字的标记(如果有)，而且页面不会被重新加载。

 

场景一：假设url 是 http://b.a.com:88/index.php?name=kang&how=#when=2011#first

search:"?name=kang&how="     第一个"?"之后

hash:"#when=2011#first"           第一个"#"之后的内容

 

为什么有时候window.location.search 输出是空呢？

注意上面的search和hash的区别，如果URL中“？”之前有一个“#”比如：“http://localhost:63342/index.html#/version？type=35&id=5”那么使用window.location.search得到的就是空（“”）。因为“？type=35&id=5”串字符是属于“#/version？type=35&id=5”这个串字符的，也就是说查询字符串search只能在取到“？”后面和“#”之前的内容，如果“#”之前没有“？”search取值为空。

 

应用1：链接带参跳转（react中操作)

    

    A 页面：

             '1': `lingshoustatis/?starttime=${this.state.starttime}&&endtime=${this.state.endtime}`,

 

    B页面：

             调用 GetQueryString 方法，然后传值，要和 A 页面上的 参数名相对应该，

           如下操作：

           var a = GetQueryString('starttime');

           var b = GetQueryString('endtime')

 

应用1：链接中跳转到 tabs 页面的第二个（react中操作)

 

    A页面：

             

 

            

 

    B页面：

    步骤：进来页面接收 name，保存name值到state里，然后 设置tabs 的 activeKey 属性 ，激活 那个你需要展示的tab标签 。

 

            1､在生命周期 ComponentDidMount 中获取浏览器上的参数。

                decodeURIComponent(window.location.hash.match(/name=(\w+)/g)).match(/=(\w+)/)[1]

    

            2､因为 tabs 有三个页面。每个页面都有一个 key 值，在 Tabs 上加属性  activeKey={key} 。激活 那个你需要展示的tab标签

                <Tabs  onChange={this.callback}   className='task'   activeKey={key}     tabBarExtraContent={operations}>

                         <TabPane tab=“第一个页面" key="1"></TabPane>

                         <TabPane tab=“第二个页面" key="2"></TabPane>

                         <TabPane tab=“第三个页面" key="3"></TabPane>

                </Tabs>