单页面应用中js获取url中的参数

基于Vue开发的单页面应用,单页面应用里是使用#hash进行路由切换的,那么现在的问题是: 无论之前的URL有没有带参数,都会在最后加上#

比如从其他链接跳转过来时带有参数,页面的URL就会变成这样:
/?a=1&b=2#/

如果从主页再往二级页跳转时还带有参数,页面的URL就会成这样:
/?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字段具体在哪个位置。

发表评论

电子邮件地址不会被公开。 必填项已用*标注