vue+webpack+vue-cli获取URL地址参数

时间:2022-05-14 23:26:22

在没有使用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了!