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结果：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路由地址和参数”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。