单页面应用中js获取url中的参数-蚊子的前端博客

在很久之前写过一篇文章【javascript获取URL链接和js链接中的参数】，在那篇文章里我们讲解了如何直接获取当前页面链接中的参数，和修改后获取任意url的参数。

不过在最近的需求里，之前文章里的知识已经无法满足了。现在我们是基于Vue开发的单页面应用，单页面应用里是使用#hash进行路由切换的，那么现在的问题是：无论之前的URL有没有带参数，都会在最后加上#。

比如从其他链接跳转过来时带有参数，页面的URL就会变成这样：

http://www.xxx.com/?a=1&b=2#/

如果从主页再往二级页跳转时还带有参数，页面的URL就会成这样：

http://www.xxx.com/?a=1&b=2#/user?uname=蚊子&year=2018

在这个具有两个?的链接，location.search获取到的是哪个值？测试一下我们就会发现，获取到的是前面?到#之前的参数：

console.log( location.search );
// "?a=1&b=2"

因此这里我们需要对整个url进行检索，这样hash#前后的数据就都能获取到了：

function getQueryString(name) {
    var reg = new RegExp("[?&]" + name + "=([^&#]*)", "i");
    var res = window.location.href.match(reg);

    if( res && res.length>1 ){
        return decodeURIComponent(res[1]);
    }
    return '';
}

getQueryString('a'); // "1"
getQueryString('b'); // "2"
getQueryString('uname'); // "蚊子"
getQueryString('year'); // "2018"

到这里这个功能已经完工了。不过在我们项目的具体实施中，还有一个特殊的需求：有的参数会以json string格式放在某个字段里传递进来，然后页面再获取到这个字段后进行JSON.parse转换，最后才能获取到json中的值。之前是每次getQueryString('extra')获取到数据后，再进行json解析，而且为了防止json解析错误，还都要加上try...catch。

因此，我也把这个特殊的需求融入到了这个函数里，过程也非常简单，就是多了一步额外的检测：

// name: 要获取的字段
// extra json string存放的字段
function getQueryString(name, extra='extra') {
    var get = function(_name){
        var reg = new RegExp("[?&]" + _name + "=([^&#]*)", "i");
        var res = window.location.href.match(reg);

        if( res && res.length>1 ){
            return decodeURIComponent(res[1]);
        }
        return '';
    }

    var res = get(name);

    // 若存在参数则直接返回
    if( res ){
        return res;
    }

    // 若不存在，则检测需要的参数是否包含在extra中
    let _addparams = get(extra);
    if( _addparams ){
        try{
            let info = JSON.parse(_addparams);
            return info[name];
        }catch(e){

        }
    }
    return '';
}

这样在项目的其他地方直接使用即可，不用再考虑name字段具体在哪个位置。

推荐订阅源

蚊子的前端博客