Vue項(xiàng)目獲取url中的參數(shù)(親測(cè)可用)
親測(cè)可用，若有疑問(wèn)請(qǐng)私信
獲取url參數(shù)有兩種情況：
情況一：內(nèi)部頁(yè)面之間互相傳值
這里先講情況一，因?yàn)橥豁?xiàng)目?jī)?nèi)互相傳值比較簡(jiǎn)單，假如要從A頁(yè)面跳轉(zhuǎn)到B頁(yè)面，并傳值。就要在A頁(yè)面這么寫
this.$router.push({name:"B",query:{
Id : this.tId ,
...
}})進(jìn)入B頁(yè)面之后，在B頁(yè)面內(nèi)這么寫
this.Id = this.$route.query.Id;
就能將A頁(yè)面的id傳入B頁(yè)面，進(jìn)行數(shù)據(jù)調(diào)取。
情況二：外部跳轉(zhuǎn)VUE項(xiàng)目時(shí)自帶參數(shù)
例如http://www.hahaha.com/list?Id=9#/
外部進(jìn)入的url會(huì)放在VUE項(xiàng)目編譯以后自動(dòng)加 “#/” ，其中帶的參數(shù)在#/之前，所以用以上方法無(wú)法獲取，那么我們只能用JS的方法來(lái)獲取
var url = window.location.href ; //獲取當(dāng)前url
var dz_url = url.split('#')[0]; //獲取#/之前的字符串
var cs = dz_url.split('?')[1]; //獲取?之后的參數(shù)字符串
var cs_arr = cs.split('&'); //參數(shù)字符串分割為數(shù)組
var cs={};
for(var i=0;i<cs_arr.length;i++){ //遍歷數(shù)組，拿到j(luò)son對(duì)象
cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
}
this.id = cs.id; //這樣就拿到了參數(shù)中的數(shù)據(jù)補(bǔ)充：vue獲取URL中的參數(shù)
1 獲取?后面的參數(shù)
http://192.168.1.105:8080/#/idInput?username=%22%E5%BC%A0%E4%B8%89%22
獲取參數(shù)方法 let id = this.$route.query.username
2 獲取不帶?的URL中的參數(shù)
http://192.168.1.12:8080/#/home/newsinfo/234
在路由中配置路由
{ path: '/home/newsinfo/:id', component: Newsinfo }
.vue頁(yè)面設(shè)置
<template> ? ? ? ? ? <router-link :to="'/home/newsinfo/' + item.id"> ? ? </template>
獲取參數(shù)方法 let id = this.$route.params.id
到此這篇關(guān)于Vue項(xiàng)目獲取url中的參數(shù)(親測(cè)可用)的文章就介紹到這了,更多相關(guān)vue url參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue利用openlayers實(shí)現(xiàn)點(diǎn)擊彈窗的方法詳解
點(diǎn)擊彈窗其實(shí)就是添加一個(gè)彈窗圖層，然后在點(diǎn)擊的時(shí)候讓他顯示出來(lái)罷了。本文將利用openlayers實(shí)現(xiàn)這一效果，快跟隨小編一起學(xué)習(xí)一下吧2022-06-06
利用vuex-persistedstate將vuex本地存儲(chǔ)實(shí)現(xiàn)
這篇文章主要介紹了利用vuex-persistedstate將vuex本地存儲(chǔ)的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3封裝 Message消息提示實(shí)例函數(shù)詳解
這篇文章主要介紹了Vue3封裝 Message消息提示實(shí)例函數(shù),具有一定的實(shí)用價(jià)值,需要的朋友可以參考下，希望能夠給你帶來(lái)幫助2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue登錄路由驗(yàn)證的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
解決el-upload批量上傳只執(zhí)行一次成功回調(diào)on-success的問(wèn)題
這篇文章主要介紹了解決el-upload批量上傳只執(zhí)行一次成功回調(diào)on-success的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
mapActions 就是將組件中的函數(shù)映射為對(duì)應(yīng)的action，通過(guò)本文我們了解了mapActions 大概是用來(lái)干什么的，接下來(lái)介紹一下 mapActions 的具體用法，感興趣的朋友一起看看吧2023-09-09
這篇文章主要介紹了Vue項(xiàng)目中配置pug解析支持的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue根據(jù)條件不同顯示不同按鈕的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了vue組件watch屬性實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
在 Vue 中,插槽（Slot）是一種非常強(qiáng)大且靈活的機(jī)制,用于在組件中插入內(nèi)容,默認(rèn)插槽是在父組件中傳遞內(nèi)容給子組件時(shí)使用的一種方式,這篇文章主要介紹了Vue中的默認(rèn)插槽詳解,需要的朋友可以參考下2024-01-01