Vue如何獲取url路由地址和參數(shù)簡(jiǎn)單示例
更新時(shí)間：2023年03月31日 09:54:26 作者：清風(fēng)細(xì)雨_林木木
這篇文章主要給大家介紹了Vue如何獲取url路由地址和參數(shù)的相關(guān)資料,通過(guò)簡(jiǎn)單的代碼示例,幫助讀者快速掌握Vue路由的基本用法,需要的朋友可以參考下
1.window.location
實(shí)例：http://www.myurl.com:8866/test?id=123&username=xxx
當(dāng)前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
請(qǐng)求的參數(shù)
window.location.search 結(jié)果：?id=123&username=xxx
備注：獲取參數(shù)
// var url="www.baidu.com?a=1&b=2&C=3";//測(cè)試地址
/*
* 分析：最前面是?或&，緊跟著除 ?&#以外的字符若干
* 然后再等號(hào)，最后再跟著除 ?&#以外的字符
* 并且要分組捕獲到【除?&#以外的字符】
*/
var reg=/[?&]([^?&#]+)=([^?&#]+)/g;
var param={};
var ret = reg.exec(url);
while(ret){ // 當(dāng)ret為null時(shí)表示已經(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
補(bǔ)充：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("?"); //取得整個(gè)地址欄
str=str.substr(num+1); //取得所有參數(shù) stringvar.substr(start [, length ]
let arr=str.split("&"); //各個(gè)參數(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引入
掛載到全局
使用
總結(jié)
到此這篇關(guān)于Vue如何獲取url路由地址和參數(shù)的文章就介紹到這了,更多相關(guān)Vue獲取url路由地址參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
mpvue小程序循環(huán)動(dòng)畫(huà)開(kāi)啟暫停的實(shí)現(xiàn)方法
這篇文章主要介紹了mpvue小程序循環(huán)動(dòng)畫(huà)開(kāi)啟暫停的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
解決Vue項(xiàng)目打包后打開(kāi)index.html頁(yè)面顯示空白以及圖片路徑錯(cuò)誤的問(wèn)題
這篇文章主要介紹了解決Vue項(xiàng)目打包后打開(kāi)index.html頁(yè)面顯示空白以及圖片路徑錯(cuò)誤的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
ElementUI中el-dropdown-item點(diǎn)擊事件無(wú)效問(wèn)題
這篇文章主要介紹了ElementUI中el-dropdown-item點(diǎn)擊事件無(wú)效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
element 穿梭框性能優(yōu)化的實(shí)現(xiàn)
本文主要介紹了element 穿梭框性能優(yōu)化，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
最近做項(xiàng)目遇到這樣的需求要求輸入4位或6位短信驗(yàn)證碼，輸入完成后收起鍵盤。實(shí)現(xiàn)步驟大家參考下本文2017-12-12
最近發(fā)現(xiàn)很多要求Vue3的技術(shù)了,不得不說(shuō)it技術(shù)的更新真的太快了,作為vue2老用戶,我們?cè)趯W(xué)習(xí)Vue3前應(yīng)該了解他們的區(qū)別以及背后的原因,下面這篇文章主要給大家介紹了關(guān)于vue2和vue3區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02
MVVM是Model-View-ViewModel的縮寫(xiě)，MVVM是一種設(shè)計(jì)思想，這篇文章主要介紹了Vue生命周期和MVVM框架,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
基于Vue中點(diǎn)擊組件外關(guān)閉組件的實(shí)現(xiàn)方法
下面小編就為大家分享一篇基于Vue中點(diǎn)擊組件外關(guān)閉組件的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了element-ui如何防止重復(fù)提交的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
解決Vue3?echarts?v-show無(wú)法重新渲染的問(wèn)題
這篇文章主要介紹了Vue3?echarts?v-show無(wú)法重新渲染的問(wèn)題,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09