Vue如何获取url路由地址和参数简单示例 |
您所在的位置：网站首页 › js返回参数 › Vue如何获取url路由地址和参数简单示例 |
Vue如何获取url路由地址和参数简单示例
|
Vue如何获取url路由地址和参数简单示例
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 结果：null2.vue-router 获取参数 this.$routethis.$route.fullPaththis.$route.hashthis.$route.matchedthis.$route.metathis.$route.paramsthis.$route.query 补充：vue获取地址栏地址url截取参数 vue获取地址栏地址url截取参数 方法 （新建js文件） export function UrlSearch(){ 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++){ num=arr[i].indexOf("="); if(num>0){ name=arr[i].substring(0,num); value=arr[i].substr(num+1); this[name]=value; } } }在main.js引入
挂载到全局
使用
总结 关于Vue如何获取url路由地址和参数的文章就介绍至此，更多相关Vue获取url路由地址参数内容请搜索编程宝库以前的文章，希望以后支持编程宝库！ 下一节：微信小程序开发中生命周期的详细介绍JS 编程技术前言在微信小程序开发中，关于微信小程序API的使用是必备技能，但是关于微信小程序的生命周期也是首先要了解和掌握的知识点。尤其是现在的前端开发领域，关于前端的各种框架和技术都要会，而且微信小程序 ... |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |