在没有使用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. js 高级程序设计(笔记)

    第二章 1.为了避免浏览器在呈现页面时出现明显的延迟,现代Web 应用程序一般都把全部JavaScript 引用放在<body>元素中页面内容的后面. 第三章 1.ECMAScript 中 ...

  2. 日志管理工具之logrotate

    Logrotate配置和测试 logrotate软件是一个日志管理工具,用于非分隔日志,删除旧的日志文件,并创建新的日志文件,起到“转储作用”,可以为系统节省磁盘空间.logrotate是基于cron ...

  3. 利用efi功能更改bios主板被隐藏的设置(如超频)

    整理自(来源): http://tieba.baidu.com/p/4934345324 ([新手教程]利用EFI启动盘修改 隐藏bios设置) http://tieba.baidu.com/p/49 ...

  4. Kotlin入门(31)JSON字符串的解析

    json是App进行网络通信最常见的数据交互格式,Android也自带了json格式的处理工具包org.json,该工具包主要提供了JSONObject(json对象)与JSONArray(json数 ...

  5. (办公)json报错的解决问题的小经验.

    经验:一半,一半的查,看那一段报错,当确定这一步的时候,用最笨的方法,用眼去看,出哪里的错误. 看有没有替换特殊字符的方法,去整理.

  6. nginx配置静态项目

    当nignx可以加载下面的这个service时 server { listen 8085;  server_name 1.192.60.82; location / { root /etc/nginx ...

  7. Java 图片爬虫,java打包jar文件

    目录 1. Java 图片爬虫,制作 .jar 文件 spider.java 制作 jar 文件 添加执行权限 1. Java 图片爬虫,制作 .jar 文件 spider.java spider.j ...

  8. TreeView 节点拖拽

    public Form1() { InitializeComponent(); treeView1.AllowDrop = true; treeView1.ItemDrag += new ItemDr ...

  9. LNMP时,出现502 Bad Gateway的错误提示

    因为工作需要,要在ubuntu中安装LNMP环境,在这里,php是最新版本php7.1.一切都进展得很顺利,安装完成后,在浏览器中输入http://127.0.0.1/info.php,出现了502 ...

  10. 中科曙光I620-G15服务器登录密码破解

    服务器型号:中科曙光I620-G15服务器 系统:windowsserver2008R2 单位:保密 服务器登录密码忘记了,进不去桌面,后来在我们云修网工程师的指导下,顺利绕过密码登录系统,然后修改系 ...