广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue如何获取url路由地址和参数简单示例
  • 124
分享到

Vue如何获取url路由地址和参数简单示例

摘要

目录1.window.location2.Vue-router 获取参数补充:vue获取地址栏地址url截取参数总结 1.window.location 实例:Http:/

1.window.location

实例:Http://www.myurl.com:8866/test?id=123&username=xxx

当前URL

window.location.href
结果:http://www.myurl.com:8866/test?id=123&username=xxx

协议

window.location.protocol
结果:http

域名 + 端口

window.location.host
结果:www.myurl.com:8866

域名

window.location.hostname()
结果:www.myurl.com

端口

window.location.port()
结果:8866

路径部分

window.location.pathname()
结果:/test

请求的参数

window.location.search
结果:?id=123&username=xxx

备注:获取参数

// var url="www.baidu.com?a=1&b=2&C=3";//测试地址


 
var reg=/[?&]([^?&#]+)=([^?&#]+)/g;
var param={};
var ret =  reg.exec(url);
while(ret){ // 当ret为null时表示已经匹配到最后了,直接跳出
	param[ret[1]]=ret[2];
	ret = reg.exec(url);
}
console.log(param)

获取’?'前边的URL

window.location.origin()
结果:http://www.myurl.com:8866

获取#之后的内容

window.location.hash
结果:null

2.vue-router 获取参数

  • this.$route
  • this.$route.fullPath
  • this.$route.hash
  • this.$route.matched
  • this.$route.meta
  • this.$route.params
  • this.$route.query

补充:vue获取地址栏地址url截取参数

vue获取地址栏地址url截取参数 方法 (新建js文件)

export function UrlSearch(){<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
let name,value,str=location.href,num=str.indexOf("?"); //取得整个地址栏
str=str.substr(num+1); //取得所有参数 stringvar.substr(start [, length ]
let arr=str.split("&"); //各个参数放到数组里
console.log(arr)
for(let i=0;i < arr.length;i++){<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
num=arr[i].indexOf("=");
if(num>0){<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
name=arr[i].substring(0,num);
value=arr[i].substr(num+1);
this[name]=value;
}
}
}

在main.js引入

挂载到全局

使用

总结 

到此这篇关于Vue如何获取url路由地址和参数的文章就介绍到这了,更多相关Vue获取url路由地址参数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue如何获取url路由地址和参数简单示例

本文链接: https://www.lsjlt.com/news/202702.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作