Vue如何获取url路由地址和参数简单示例
短信预约 -IT技能 免费直播动态提醒
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路由地址参数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
