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

蚊子前端博客
发布于 2018-07-19 19:58
单页面应用中以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字段具体在哪个位置。

标签:
阅读(1386)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆