Vue如何獲取url路由地址和參數(shù)簡單示例

更新時間：2023年03月31日 09:54:26 作者：清風細雨_林木木

這篇文章主要給大家介紹了Vue如何獲取url路由地址和參數(shù)的相關(guān)資料,通過簡單的代碼示例,幫助讀者快速掌握Vue路由的基本用法,需要的朋友可以參考下

1.window.location

實例：http://www.myurl.com:8866/test?id=123&username=xxx

當前URL

window.location.href
結(jié)果：http://www.myurl.com:8866/test?id=123&username=xxx

協(xié)議

window.location.protocol
結(jié)果：http

域名 + 端口

window.location.host
結(jié)果：www.myurl.com:8866

域名

window.location.hostname（）
結(jié)果：www.myurl.com

端口

window.location.port（）
結(jié)果：8866

路徑部分

window.location.pathname（）
結(jié)果：/test

請求的參數(shù)

window.location.search
結(jié)果：?id=123&username=xxx

備注：獲取參數(shù)

// 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時表示已經(jīng)匹配到最后了，直接跳出
	param[ret[1]]=ret[2];
	ret = reg.exec(url);
}
console.log(param)

獲取’?'前邊的URL

window.location.origin（）
結(jié)果：http://www.myurl.com:8866

獲取#之后的內(nèi)容

window.location.hash
結(jié)果：null

2.vue-router 獲取參數(shù)

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

補充：vue獲取地址欄地址url截取參數(shù)

vue獲取地址欄地址url截取參數(shù) 方法（新建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); //取得所有參數(shù) stringvar.substr(start [, length ]
let arr=str.split("&"); //各個參數(shù)放到數(shù)組里
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引入