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

vue+webpack+vue-cli获取URL地址参数的更多相关文章

  1. ASP.NET MVC中获取URL地址参数的两种写法

    一.url地址传参的第一种写法 1.通过mvc中默认的url地址书写格式:控制器/方法名/参数 2.实例:http://localhost:39270/RequestDemo/Index/88,默认参 ...

  2. 获取URL地址参数方法

    //获取url参数 getQueryVariable(variable){ var query =decodeURIComponent(window.location.search.substring ...

  3. jquery 获取url地址参数

    1 var url = document.URL; 2 var a = url.split("="); 3 4 if(a[1]){ 5 return options.fn(this ...

  4. JS获取URL地址参数

    <script> var url = "http://127.0.0.1/index.php?old_quantity=168&date=1478309879000$id ...

  5. 准确获取URL地址参数

    http://localhost:8080/?state=app&code=021axrkH0Il7Df2bEQkH0DMjkH0axrkP 准确获取code的值 getQueryString ...

  6. JS动态获取项目名以及获取URL地址中的参数

    在项目当中我们可能会遇到例如改变的项目名称之后,相对应的地址就需要改变,为了减少工作量,将地址当中的项目名这一块写成动态获取的,那么最关键一点就是我要先获取它,再进行操作: 知识点整理,话不多说,直接 ...

  7. vue不通过路由直接获取url中参数的方法示例

    vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...

  8. js获取当前url地址参数中文乱码问题

    网上看了一些关于此问题的文章,都说的不清不楚,有些更是乱七八糟,完全没法看,故此找了一篇能用的,借鉴作为笔记. //首先获取到当前页面的地址栏信息 var url = window.location. ...

  9. Servlet获取URL地址

    这里来说说用Servlet获取URL地址.在HttpServletRequest类里,有以下六个取URL的函数: getContextPath 取得项目名 getServletPath 取得Servl ...

随机推荐

  1. 【代码笔记】Web-CSS-CSS 教程

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. 2019元月新SAP项目落地记

    2019元月新SAP项目落地记 ~ 追求绝对安全感,要求无缝衔接 ~ 元旦刚过,我就开始了新SAP项目的寻找之旅. 笔者追求绝对的安全感,以及新旧项目之间的无缝衔接.即不能让自己长时间的闲着无项目做, ...

  3. 广州.NET微软技术俱乐部微信群有用信息集锦(10) - 大量json数据压缩方案

    这是广州.NET微软技术俱乐部微信群有用信息集锦系列的其中一篇文章.   刚才微信群里有人问:“对于大量json数据返回的时候,有用过什么压缩方案吗?”   大家都给与了回答和帮助.包括: 开启gzi ...

  4. linux下的QT打包方法

    一句话很简单,一个shell脚本搞定,不跟你嘻嘻哈哈 #!/bin/shexe="ThorIceLocker"#存放你的可执行文件的名字des="/home/ninetr ...

  5. linux下的qt串口通信

    1.linux下的qt串口通信跟windows唯一的差别就是端口号的名字,windows下面是COM,而linux是ttyUSB0的路径 2.一般情况下linux插上USB转串口线就可以在/dev/目 ...

  6. ES6常用

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准. 因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).虽然浏览器在不 ...

  7. 解决jest处理es模块

    解决jest处理es模块 问题场景 项目使用jest进行测试时, 当引入外部库是es模块时, jest无法处理导致报错. Test suite failed to run Jest encounter ...

  8. ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...

  9. MongoDB 提升性能的18原则(开发设计阶段)

    MongoDB 是高性能数据,但是在使用的过程中,大家偶尔还会碰到一些性能问题.MongoDB和其它关系型数据库相比,例如 SQL Server .MySQL .Oracle 相比来说,相对较新,很多 ...

  10. JavaCC的TokenManager和Parser

    TokenManager不会感知Parser的存在,这意味着TokenManager会尽量匹配足够长的终结符,而不是依据Parser的语法规则. 当被解析的文本为" @@ "时,T ...