Vue項(xiàng)目獲取url中的參數(shù)(親測可用)
親測可用，若有疑問請私信
獲取url參數(shù)有兩種情況：
情況一：內(nèi)部頁面之間互相傳值
這里先講情況一，因?yàn)橥豁?xiàng)目內(nèi)互相傳值比較簡單，假如要從A頁面跳轉(zhuǎn)到B頁面，并傳值。就要在A頁面這么寫
this.$router.push({name:"B",query:{
Id : this.tId ,
...
}})進(jìn)入B頁面之后，在B頁面內(nèi)這么寫
this.Id = this.$route.query.Id;
就能將A頁面的id傳入B頁面，進(jìn)行數(shù)據(jù)調(diào)取。
情況二：外部跳轉(zhuǎn)VUE項(xiàng)目時(shí)自帶參數(shù)
例如http://www.hahaha.com/list?Id=9#/
外部進(jìn)入的url會放在VUE項(xiàng)目編譯以后自動(dòng)加 “#/” ，其中帶的參數(shù)在#/之前，所以用以上方法無法獲取，那么我們只能用JS的方法來獲取
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對象
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頁面設(shè)置
<template> ? ? ? ? ? <router-link :to="'/home/newsinfo/' + item.id"> ? ? </template>
獲取參數(shù)方法 let id = this.$route.params.id
到此這篇關(guān)于Vue項(xiàng)目獲取url中的參數(shù)(親測可用)的文章就介紹到這了,更多相關(guān)vue url參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
腳手架vue-cli工程webpack的作用和特點(diǎn)
webpack是一個(gè)模塊打包的工具，它的作用是把互相依賴的模塊處理成靜態(tài)資源。這篇文章主要介紹了vue-cli工程webpack的作用和特點(diǎn),需要的朋友可以參考下2018-09-09
源碼的重要性相信不用再多說什么了吧,特別是用Vue 框架的,一般在面試的時(shí)候面試官多多少少都會考察源碼層面的內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于vue3源碼剖析之簡單實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue-router history模式下的微信分享小結(jié)
本篇文章主要介紹了vue-router history模式下的微信分享小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Vue中的計(jì)算屬性computed傳參方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了Vue之插槽(Slot)的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue中v-model如何綁定多循環(huán)表達(dá)式實(shí)戰(zhàn)案例
v-model綁定的變量無論是對象還是數(shù)組都是綁定的value值,下面這篇文章主要給大家介紹了關(guān)于vue中v-model如何綁定多循環(huán)表達(dá)式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Vue+Element?UI實(shí)現(xiàn)復(fù)制當(dāng)前行數(shù)據(jù)的功能
這篇文章主要介紹了如何使用Vue?+?Element?UI?實(shí)現(xiàn)在列表的操作欄新增一個(gè)復(fù)制按鈕,復(fù)制當(dāng)前行的數(shù)據(jù)可以打開新增彈窗后亦可以跳轉(zhuǎn)到新增頁面,感興趣的小伙伴可以參考下2023-11-11
如果你在 vue3 開發(fā)中使用了語法的話,對于組件的name屬性,需要做一番額外的處理,下面這篇文章主要給大家介紹了關(guān)于Vue3 setup語法糖的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要給大家介紹了關(guān)于vue中axios請求封裝的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧要的朋友可以參考下2019-03-03
這篇文章主要介紹了vue的token刷新處理的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07