关于前端:获取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=1getQueryString('wd') // 打印： "哈哈哈"

博客地址