单页面应用中以hash作为路由,那么在单页面中怎么能方便地获取到参数呢?
在很久之前写过一篇文章【javascript获取URL链接和js链接中的参数】,在那篇文章里我们讲解了如何直接获取当前页面链接中的参数,和修改后获取任意url的参数。
不过在最近的需求里,之前文章里的知识已经无法满足了。现在我们是基于Vue开发的单页面应用,单页面应用里是使用#
hash进行路由切换的,那么现在的问题是: 无论之前的URL有没有带参数,都会在最后加上#
。
比如从其他链接跳转过来时带有参数,页面的URL就会变成这样:
COPYBASH
http://www.xxx.com/?a=1&b=2#/
如果从主页再往二级页跳转时还带有参数,页面的URL就会成这样:
COPYBASH
http://www.xxx.com/?a=1&b=2#/user?uname=蚊子&year=2018
在这个具有两个?
的链接,location.search获取到的是哪个值?测试一下我们就会发现,获取到的是前面?
到#
之前的参数:
COPYJAVASCRIPT
console.log( location.search ); // "?a=1&b=2"
因此这里我们需要对整个url进行检索,这样hash#
前后的数据就都能获取到了:
COPYJAVASCRIPT
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
。
因此,我也把这个特殊的需求融入到了这个函数里,过程也非常简单,就是多了一步额外的检测:
COPYJAVASCRIPT
// 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字段具体在哪个位置。