js获取当前页面的url网址信息

1、设置或获取整个

URL

为字符串：

windowlocationhref

2、设置或获取与

URL

关联的端口号码：

windowlocationport

3、设置或获取

URL

的协议部分

windowlocationprotocol

4、设置或获取

href

属性中跟在问号后面的部分

windowlocationsearch

5、获取变量的值(截取等号后面的部分)

复制代码

代码如下:

var

url

=

windowlocationsearch;

//

alert(urllength);

//

alert(urllastIndexOf('='));

var

loc

=

urlsubstring(urllastIndexOf('=')+1,

urllength);

6、设置或获取

URL

的协议部分：

windowlocationprotocol

7、设置或获取

href

属性中在井号“#”后面的分段：

windowlocationhash

8、设置或获取

location

或

URL

的

hostname

和

port

号码：

windowlocationhost

第一种传参方式，动态路由传参

通过设置link的path属性，进行路由的传参，当点击link标签的时候，会在上方的url地址中显示传递的整个url

第二种传参方式，隐式路由传参

所谓隐式路由传参，就是传参的信息不会暴露在url中，当点击该link标签，想要获取到传递的参数，就在对应的路由组件中，通过thispropslocationstate获取即可

推荐使用，比较安全，获取传递参数都比较方便

第三种传参方式 组件间传参

何时使用？

当一个路由组件需要接收来自父组件传参的时候

改造route标签通过component属性激活组件的方式

正常情况下的route标签在路由中的使用方式

学习web前端，推荐来北京尚学堂，超前的课程教学，面对面的辅导，带给你最需要的知识与技术。

React-Router 40 版本之前安装

React-Router 40 版本之后安装

在React-Router 40 开始，官方提供一个基础的路由 react-router 。

目前使用的版本

获取path的参数

Route里面 component 和 render 这两个属性的使用：

<Link /> 里面的 to 属性是一个对象， 比如：传递一个基本的 location 对象也可以在后面加上传递其他的对象, 这些对象值都可以通过 props 获取这里面的参数

<NavLink> 是 <Link> 的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有：

Switch 意义：

这个 to 属性也可以是一个对象

<Redirect /> 里面的 from 属性：

例如：

如果我访问 >

在Angular8中使用PlatformLocation类，此类保存url链接信息，如基地址，端口号等。使用如下：

constructor(private platformLocation: PlatformLocation) {}

ngOnInit() {

consolelog(thisplatformLocationhref);//href属性即是当前url

}

设置或获取对象指定的文件名或路径。\x0d\\x0d\alert(windowlocationpathname)\x0d\\x0d\\x0d\设置或获取整个URL为字符串。\x0d\\x0d\\x0d\alert(windowlocationhref);\x0d\\x0d\设置或获取与URL关联的端口号码。\x0d\\x0d\alert(windowlocationport)\x0d\\x0d\\x0d\设置或获取URL的协议部分。\x0d\\x0d\alert(windowlocationprotocol)\x0d\\x0d\\x0d\设置或获取href属性中在井号“#”后面的分段。\x0d\\x0d\alert(windowlocationhash)\x0d\\x0d\\x0d\设置或获取location或URL的hostname和port号码。\x0d\\x0d\alert(windowlocationhost)\x0d\\x0d\\x0d\设置或获取href属性中跟在问号后面的部分。\x0d\\x0d\alert(windowlocationsearch)\x0d\

//JS获取URL网址的参数

function $_GET(name,urls){

  var url=urls||windowlocationhref;

  if(!name==true){

    var data=urlmatch(new RegExp("([^&])=([^&])","ig"));

    return data!=nulldata:[];

  }else{

    var test=new RegExp(name+"=","i")test(url);

    return testurlmatch(new RegExp(name+"=([^&])","i"))[1]:"";

  }

};

//获取当前页面网址参数中所有key,返回值是一个对象数组,如 obj = {A:'001',B:'002',C:'003' }

var obj = $_GET();//获取当前页面网址参数中指定key的值，如 fr 返回值是字符串 obj = 'qlquick'

var obj = $_GET('fr');//获取指定网址字符串中参数A的值字符串 A = '001'

var obj = $_GET("A","指定网址字符串加参数A=001&B=002&C=003&D=004&E=005&F=006&G=007&H=008");

以上就是关于js获取当前页面的url网址信息全部的内容，包括:js获取当前页面的url网址信息、react路由传参的几种方式、React-Router 介绍及使用等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！