关于前端:获取url路由参数

形式一：

语法糖

// 如果不传则获取路由参数。返回对象。如果反复给参数，则和 vue-router 一样，都是以数组返回
getAllUrlParams([url])

应用

// 情景一：获取某个 url 上的参数
let href = 'https://www.baidu.com/s?wd= 哈哈哈 &rsv_spt=1'
getAllUrlParams(href)
/**
* 打印后果：*  {wd: "哈哈哈", rsv_spt: "1"}
*/

// 情景二：获取浏览器地址栏参数
getAllUrlParams() // 外面默认查问 location.href 

代码

// 获取 url 参数
function getAllUrlParams(urls) {
    var url = urls || location.href
    // 用 JS 拿到 URL，如果函数接管了 URL，那就用函数的参数。如果没传参，就应用以后页面的 URL
    var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
    // 用来存储咱们所有的参数
    var obj = {};
    // 如果没有传参，返回一个空对象
    if (!queryString) {return obj;}
    // stuff after # is not part of query string, so get rid of it
    queryString = queryString.split('#')[0];
    // 将参数分成数组
    var arr = queryString.split('&');
    for (var i = 0; i < arr.length; i++) {
        // 拆散成 key:value 的模式
        var a = arr[i].split('=');
        // 将 undefined 标记为 true
        var paramName = a[0];
        var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
        if (paramName.match(/\[(\d+)?\]$/)) {
            // 如果 paramName 不存在，则创立 key
            var key = paramName.replace(/\[(\d+)?\]/, '');
            if (!obj[key]) obj[key] = [];
            // 如果是索引数组 e.g. colors[2]
            if (paramName.match(/\[\d+\]$/)) {
                // 获取索引值并在对应的地位增加值
                var index = /\[(\d+)\]/.exec(paramName)[1];
                obj[key][index] = paramValue;
            } else {
                // 如果是其它的类型，也放到数组中
                obj[key].push(paramValue);
            }
        } else {
            // 解决字符串类型
            if (!obj[paramName]) {
                // 如果如果 paramName 不存在，则创建对象的属性
                obj[paramName] = paramValue;
            } else if (obj[paramName] && typeof obj[paramName] === 'string') {
                // 如果属性存在，并且是个字符串，那么就转换为数组
                obj[paramName] = [obj[paramName]];
                obj[paramName].push(paramValue);
            } else {
                // 如果是其它的类型，还是往数组里丢
                obj[paramName].push(paramValue);
            }
        }
    }
    return obj;
}

办法二

应用形式

let href = 'https://www.baidu.com/s?wd= 哈哈哈 &rsv_spt=1'
getQuerys(href);
/**
* 打印后果：*  {wd: "哈哈哈", rsv_spt: "1"}
*/

// 获取浏览器网页上参数 getQuerys(location.href)

 function getQuerys(e) {if (!e) return "";
    var t = {},
    r = [],
    n = "",
    a = "";
    try {var i = [];
        if (e.indexOf("?") >= 0 && (i = e.substring(e.indexOf("?") + 1, e.length).split("&")), i.length > 0) for (var o in i) n = (r = i[o].split("="))[0],
        a = r[1],
        t[n] = a
    } catch(s) {t = {}
    }
    return t
}

办法三：

此办法只能对浏览器参数中获取单个参数，灵活性差，不举荐

export const getQueryString = (name) => {const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    const search = window.location.search.split('?')[1] || '';
    const r = search.match(reg) || [];
    return r[2];
}

上面是是否形式：

// 比方以后浏览器网址上：https://www.baidu.com/s?wd= 哈哈哈 &rsv_spt=1
getQueryString('wd') // 打印："哈哈哈"

博客地址