Vue項目獲取url中的參數(親測可用)
親測可用,若有疑問請私信
獲取url參數有兩種情況:
情況一:內部頁面之間互相傳值
這里先講情況一,因為同一項目內互相傳值比較簡單,假如要從A頁面跳轉到B頁面,并傳值。就要在A頁面這么寫
this.$router.push({name:"B",query:{ Id : this.tId , ... }})
進入B頁面之后,在B頁面內這么寫
this.Id = this.$route.query.Id;
就能將A頁面的id傳入B頁面,進行數據調取。
情況二:外部跳轉VUE項目時自帶參數
例如http://www.hahaha.com/list?Id=9#/
外部進入的url會放在VUE項目編譯以后自動加 “#/” ,其中帶的參數在#/之前,所以用以上方法無法獲取,那么我們只能用JS的方法來獲取
var url = window.location.href ; //獲取當前url var dz_url = url.split('#')[0]; //獲取#/之前的字符串 var cs = dz_url.split('?')[1]; //獲取?之后的參數字符串 var cs_arr = cs.split('&'); //參數字符串分割為數組 var cs={}; for(var i=0;i<cs_arr.length;i++){ //遍歷數組,拿到json對象 cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1] } this.id = cs.id; //這樣就拿到了參數中的數據
補充:vue獲取URL中的參數
1 獲取?后面的參數
http://192.168.1.105:8080/#/idInput?username=%22%E5%BC%A0%E4%B8%89%22
獲取參數方法 let id = this.$route.query.username
2 獲取不帶?的URL中的參數
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>
獲取參數方法 let id = this.$route.params.id
到此這篇關于Vue項目獲取url中的參數(親測可用)的文章就介紹到這了,更多相關vue url參數內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
利用vuex-persistedstate將vuex本地存儲實現
這篇文章主要介紹了利用vuex-persistedstate將vuex本地存儲的實現,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04解決el-upload批量上傳只執(zhí)行一次成功回調on-success的問題
這篇文章主要介紹了解決el-upload批量上傳只執(zhí)行一次成功回調on-success的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03