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了!
vue+webpack+vue-cli获取URL地址参数的更多相关文章
- ASP.NET MVC中获取URL地址参数的两种写法
一.url地址传参的第一种写法 1.通过mvc中默认的url地址书写格式:控制器/方法名/参数 2.实例:http://localhost:39270/RequestDemo/Index/88,默认参 ...
- 获取URL地址参数方法
//获取url参数 getQueryVariable(variable){ var query =decodeURIComponent(window.location.search.substring ...
- jquery 获取url地址参数
1 var url = document.URL; 2 var a = url.split("="); 3 4 if(a[1]){ 5 return options.fn(this ...
- JS获取URL地址参数
<script> var url = "http://127.0.0.1/index.php?old_quantity=168&date=1478309879000$id ...
- 准确获取URL地址参数
http://localhost:8080/?state=app&code=021axrkH0Il7Df2bEQkH0DMjkH0axrkP 准确获取code的值 getQueryString ...
- JS动态获取项目名以及获取URL地址中的参数
在项目当中我们可能会遇到例如改变的项目名称之后,相对应的地址就需要改变,为了减少工作量,将地址当中的项目名这一块写成动态获取的,那么最关键一点就是我要先获取它,再进行操作: 知识点整理,话不多说,直接 ...
- vue不通过路由直接获取url中参数的方法示例
vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...
- js获取当前url地址参数中文乱码问题
网上看了一些关于此问题的文章,都说的不清不楚,有些更是乱七八糟,完全没法看,故此找了一篇能用的,借鉴作为笔记. //首先获取到当前页面的地址栏信息 var url = window.location. ...
- Servlet获取URL地址
这里来说说用Servlet获取URL地址.在HttpServletRequest类里,有以下六个取URL的函数: getContextPath 取得项目名 getServletPath 取得Servl ...
随机推荐
- 【代码笔记】Web-CSS-CSS 教程
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 2019元月新SAP项目落地记
2019元月新SAP项目落地记 ~ 追求绝对安全感,要求无缝衔接 ~ 元旦刚过,我就开始了新SAP项目的寻找之旅. 笔者追求绝对的安全感,以及新旧项目之间的无缝衔接.即不能让自己长时间的闲着无项目做, ...
- 广州.NET微软技术俱乐部微信群有用信息集锦(10) - 大量json数据压缩方案
这是广州.NET微软技术俱乐部微信群有用信息集锦系列的其中一篇文章. 刚才微信群里有人问:“对于大量json数据返回的时候,有用过什么压缩方案吗?” 大家都给与了回答和帮助.包括: 开启gzi ...
- linux下的QT打包方法
一句话很简单,一个shell脚本搞定,不跟你嘻嘻哈哈 #!/bin/shexe="ThorIceLocker"#存放你的可执行文件的名字des="/home/ninetr ...
- linux下的qt串口通信
1.linux下的qt串口通信跟windows唯一的差别就是端口号的名字,windows下面是COM,而linux是ttyUSB0的路径 2.一般情况下linux插上USB转串口线就可以在/dev/目 ...
- ES6常用
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准. 因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).虽然浏览器在不 ...
- 解决jest处理es模块
解决jest处理es模块 问题场景 项目使用jest进行测试时, 当引入外部库是es模块时, jest无法处理导致报错. Test suite failed to run Jest encounter ...
- ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...
- MongoDB 提升性能的18原则(开发设计阶段)
MongoDB 是高性能数据,但是在使用的过程中,大家偶尔还会碰到一些性能问题.MongoDB和其它关系型数据库相比,例如 SQL Server .MySQL .Oracle 相比来说,相对较新,很多 ...
- JavaCC的TokenManager和Parser
TokenManager不会感知Parser的存在,这意味着TokenManager会尽量匹配足够长的终结符,而不是依据Parser的语法规则. 当被解析的文本为" @@ "时,T ...