JS：獲取頁面傳參，如何指定名稱獲取？或者全都要？

入我的主頁，查看更多JS的分享！
我的代碼有多短，本文章就有多短！(?_?)

1. 思路

先獲取瀏覽器參數的字符串，判斷并轉為對象，如果沒有指定參數名，直接返回該對象。

2. 代碼

需要說的話都在注釋里了，先貼上代碼（好像明白了程序員為啥話不多）

/**
 * 獲取：當前鏈接的參數
 * 若不指定參數，則以對象的形式返回全部參數
 * 若指定參數名，則只返回對應的值
 * 處理：中文解碼
 * 測試："?id=123&name=哈哈哈"
 * 結果：{id: "123", name: "哈哈哈"}
 */
var getLocationParam=(name)=>{
  let param=window.location.search.substr(1);
  if (!param) {
    return undefined;
  } else {
    let pArr=param.split("&");
    let res={};
    for (let i=0; i < pArr.length; i++) {
      let item=pArr[i].split("=");
      res[item[0]]=item[1] ? decodeURI(item[1]) : null;
    }
    return !name ? res: res[name];
  }
};

如果參數有中文，直接用"decodeURI()"，而"unescape()"并不適用。（測試了QQBrowser、Chrome、IE9-11）

運行：

console.log(getLocationParam("id"));
//輸出：123
console.log(getLocationParam("name"));
//輸出：哈哈哈
console.log(getLocationParam("due"));
//輸出：undefined
console.log(getLocationParam());
//輸出：{id: "123", name: "哈哈哈"}

網上有一段代碼，是用正則來獲取指定的參數，雖然只能獲取指定的參數。嘛，直接貼上代碼看看吧：

取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)

vue-router獲取url傳參 | 《Linux就該這么學》 (linuxprobe.com)

ue單頁面開發中路由傳參大家不陌生吧！但是有時候會出現跳轉過后帶過的參數頁面刷新五數據。

今天我這說的是路由傳參是對象。

路由傳值parmas對象

courseData參數名后面顯示的值為亂碼

傳到頁面能獲取值但是刷新后頁面無法看到數據，這里其實是因為傳過的對象必須是要對象字符串才不會出現這個問題。

JSON.stringify把對象轉換成字符串或者也可以拼接成字符串

跳轉該組件獲取數據

把字符串對象解析然后獲取數據

url里面的參數

這樣你跳轉的頁面刷新數據就一直存在了。

當然這里還可以用 HTML5本地儲存數據sessionStorage，一樣可以解決這個問題。

在線咨詢

上一篇：提升web前端開發人員技能的六個秘籍
下一篇：4種非常實用的CSS代碼段，你都學會了嗎？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JS：獲取頁面傳參，如何指定名稱獲取？或者全都要？

1. 思路

2. 代碼

您的項目需求