最近做了一個vue的小的項目,是由外部鏈接打開的晕拆,所以就要涉及從外部url中獲取參數(shù)。雖然不是很難的問題材蹬,但是在最初遇到這個問題的時候也頭疼了一小會兒~
(汗顏实幕,遇到未知的東西總會先頭疼一下,實際做起來才知道原來這么簡單堤器,哈哈)
從外部url中獲取參數(shù)
var url = window.location.href ; //拿到當前頁面url,vue編譯完成的頁面會有'#/'
//例如http://c.baidu.com/mark?setId=64#/
var dz_url = url.split('#')[0]; //#前面的有用字符
var cs = dz_url.split('?')[1]; //?后面的參數(shù)字符串
var cs_arr = cs.split('&'); //將參數(shù)字符串分割為包含多個參數(shù)的數(shù)組
var cs={}; //聲明一個容器
for(var i=0;i<cs_arr.length;i++){ //遍歷數(shù)組
//將下標為0123的數(shù)組字符串昆庇,轉(zhuǎn)化為 {key1:value1;key2:value2;} 格式的json
cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
}
在需要使用參數(shù)的地方這樣賦值
this.setId = cs.setId;
vue模板內(nèi)部互傳、取參數(shù)
從A頁面跳轉(zhuǎn)B頁面:在A頁面當中:
// 定義跳轉(zhuǎn)函數(shù)闸溃,并傳輸數(shù)據(jù)
goDetail(){
this.$router.push({name:"detail",query:{
setId:this.setId,
courseId:this.courseId
}})
}
在需要跳轉(zhuǎn)的地方調(diào)用該函數(shù)
this.goDetail();
在B頁面當中整吆,取值:
this.setId = this.$route.query.setId;
this.courseId = this.$route.query.courseId;
vue會將數(shù)據(jù)加在url后面?zhèn)鬏斀o目標頁面,url格式例子如下
http://c.baidu.com/marke?setId=64#/detail?setId=64&courseId=26
注意:url當中不能傳對象辉川,親測傳對象會出錯