AngularJS+TypeScript登录页无法获取URL查询参数问题排查

我来帮你梳理下为什么vm.fail会为空，以及对应的解决办法：

最直接的问题：正则表达式里的HTML实体错误 #

你的getParURL函数里，正则匹配规则写了[\\?&]——这里的&是HTML转义后的字符，但实际浏览器URL里的参数分隔符是原始的&符号！

举个例子，当你跳转到/login?fail=ko时，window.location.href拿到的是包含?fail=ko的原始URL，而你的正则在找?或者&开头的参数，自然匹配不到fail这个参数，所以返回空字符串。

额外建议：前端路由场景下的参数获取最佳实践 #

另外，从你的代码能看出来用了前端路由（比如Vue Router），这种场景下直接用window.location.href解析参数其实不是最优解，因为SPA的路由可能是前端模拟的，某些情况下和window.location.href的内容不一致。框架本身已经提供了更可靠的参数获取方式。

具体修复方案 #

方案1：修正正则表达式 #

把getParURL里的&改成&，修正后的函数如下：

getParURL(name) { 
    let regexS = "[\\?&]" + name + "=([^&#]*)"; 
    let regex = new RegExp(regexS); 
    let tmpURL = window.location.href; 
    let results = regex.exec(tmpURL); 
    if (results == null) { 
        return ""; 
    } else { 
        return results[1]; 
    } 
}

方案2：使用框架路由内置方法（更推荐） #

直接通过路由实例的query对象获取参数，代码更简洁还能避免正则的各种坑：

// 在View1ViewCtrl的构造函数里替换原来的代码：
vm.fail = this.$route.query.fail || "";

验证效果 #

修复后，当你跳转到/login?fail=ko时，不管用哪种方案，vm.fail都会正确拿到ko这个值啦。

内容的提问来源于stack exchange，提问作者Eladerezador