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