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引入
掛載到全局
使用
總結(jié)
到此這篇關(guān)于Vue如何獲取url路由地址和參數(shù)的文章就介紹到這了,更多相關(guān)Vue獲取url路由地址參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue2.0模擬后臺json數(shù)據(jù)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
解決vue項目Error:Cannot find module‘xxx’類報錯問題
當npm運行報錯Error:Cannot find module 'xxx'時,通常是因為node_modules文件或依賴未正確安裝,解決步驟包括刪除node_modules和package-lock.json文件,重新運行npm install,并根據(jù)需要安裝額外插件,若網(wǎng)絡(luò)問題導(dǎo)致安裝失敗2024-10-10
vue項目如何實現(xiàn)Echarts在label中獲取點擊事件
這篇文章主要介紹了vue項目如何實現(xiàn)Echarts在label中獲取點擊事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-cli實現(xiàn)異步請求返回mock模擬數(shù)據(jù)
網(wǎng)上有不少使用mockjs模擬數(shù)據(jù)的文章，但基本都是本地攔截請求返回數(shù)據(jù)，本文主要介紹了vue-cli實現(xiàn)異步請求返回mock模擬數(shù)據(jù)，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本文主要介紹了Vue實現(xiàn)半自動打字機特效,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12
這篇文章主要為大家介紹了c++游戲教程使用easyx實現(xiàn)大飛機示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
Vue2快速實現(xiàn)px轉(zhuǎn)vw適配方式
本文介紹了如何在Vue2+VueCLI項目中使用postcss-px-to-viewport-8-plugin插件,將px單位自動轉(zhuǎn)換為vw單位,實現(xiàn)響應(yīng)式設(shè)計,詳細步驟包括插件安裝、VueCLI配置、使用示例和驗證方法,以及與Vue3的配置差異2025-10-10
Vue.filter函數(shù)用于注冊一個全局的過濾器,該過濾器可以在模板和組件中使用,這篇文章主要介紹了vue?filter的幾種用法示例小結(jié),需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue webpack多頁面構(gòu)建的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
vue項目中v-model父子組件通信的實現(xiàn)詳解
vue.js，是一個構(gòu)建數(shù)據(jù)驅(qū)動的 web 界面的庫。Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。下面這篇文章主要給大家介紹了關(guān)于vue項目中v-model父子組件通信實現(xiàn)的相關(guān)資料，需要的朋友可以參考下。2017-12-12