vue+webpack+vue-cli获取URL地址参数
在没有使用webpack+vue router开发中,想要获取RUL传的参数地址,直接通过一个函数就可以获得。
比如在 www.test.com/test.html?sign=test 地址中,想要获取sign的值,通常的方法是用一个函数,
var getUrlStr = function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
}
var sign = getUrlStr ("sign");
sign的值就为 test ;
那么问题来了,用router开发,是直接通过路由跳转的页面,那该怎样获取呢?
首先想到的也是通过以上方法获取,但试了一下,表示行不通。通过百度了解到,可以直接使用提供的方法;
就如这样,也是同样的传参 http://localhost:8080/#/one?sign=nsrjbxx
var sign = this.$route.query.sgin ;
this 指的是 vue 对象,所以放在vue的方法中直接使用就行了,sign 是参数,这个是可以自定义的。
理解很潜,简单的能达到目的,有更深的理解欢迎来评!!!
最近发现 可以简单的修改下getUrlStr 函数也是可以实现的
var getUrlStr = function(name){ /** * 获取地址栏参数 */ let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)","i"); if(reg.test(window.location.href)){ return unescape(RegExp.$2.replace(/\+/g," ")) } return undefined }
直接通过获取location.href 得到URL的地址,在根据获取参数就ok了!