获取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') // 打印： "哈哈哈"

博客地址