vue-router獲取url傳參

大雄45 發表於 2022-06-08
Vue
導讀 vue-router獲取url傳遞的引數分為兩種情況。

獲取url引數有兩種情況:

應用場景一:內部頁面之間互相傳值
假如要從A頁面跳轉到B頁面,

this.$router.push({path:"/B",query:{
    Id : this.tId ,
    ...
}})

進入B頁面之後,

this.Id = this.$route.query.Id;

就能將A頁面的id傳入B頁面,進行引數獲取。

應用場景二:外系統跳轉Vue專案時自帶引數
例如:  https://shq5785.blog.csdn.net/list?Id=sunhuaqiang1#/

外系統跳轉進入的url會在Vue專案編譯後自動新增 “#/”字尾 ,其中帶的引數在 “#/”之前,所以應用場景一中的方法無法獲取,只能應用JS的方法來獲取,解析功能函式如下所示:

getURLParams(url) {
    let param = url.split('#')[0];           //獲取#/之前的字串
    var paramContent = param.split('?')[1];  //獲取?之後的引數字串
    var paramsArray = paramContent.split('&');    //引數字串分割為陣列
    var paramResult = {};
    //遍歷陣列,拿到json物件
    paramsArray.forEach((item, index, paramsArray) => {
		paramResult[paramsArray[index].split('=')[0]] = paramsArray[index].split('=')[1];
    })
    return paramResult;
}

呼叫方式如下:

this.getURLParams(window.location.href)

原文來自:

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2840717/,如需轉載,請註明出處,否則將追究法律責任。

相關文章