vue中如何不通过路由直接获取url中的参数

前言:为什么要不通过路由直接获取url中的参数?

vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的。

相对来说,在某些情况下直接在url后面拼接?mid=100的方式传递参数更灵活,你不需要设置路由,只需要在url后拼接参数即可,但是这种方式就需要通过javascript获取并提取url中的参数,通过传统的方式直接在页面中获取是行不通的了,因为vue中是无法通过location.search()来获取url问号之后的内容的。当然,这个问题也有解决方法,就是把获取参数的脚本代码注册成全局方法就可以了。

第一步:创建utils.js文件,并保存到项目根目录

1 export default{
2     getUrlKey:function(name){
3         return decodeURIComponent((new RegExp(‘[?|&]‘+name+‘=‘+‘([^&;]+?)(&|#|;|$)‘).exec(location.href)||[,""])[1].replace(/\+/g,‘%20‘))||null;
4     }
5 }

第二步:在主js方法(main.js)中注册全局方法

import utils         from ‘./utils‘             //获取url参数

Vue.prototype.$utils=utils            //注册全局方法

第三步:vue文件中引用方法

let channel=this.$utils.getUrlKey("channel")

时间: 2024-12-28 16:29:26

vue中如何不通过路由直接获取url中的参数的相关文章

如何获取url中的参数并传递给iframe中的报表

在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数呢?以下用报表软件FineReport简单介绍一些. 具体实现过程 将报表生成页面时,给网页添加onload事件,首先获取url中的参数,然后嫁接到iframe的src上,或者通过获得的参数拼接处完整的报表url赋给iframe的src. <html> <head> <title

利用javascript获取url中的传值并创建页面元素

url传值: 在地址后附加 ?键1=值1&键2=值2&键3=值3... ...(注意:该方法会将参数显示在地址栏中,传入的值应该不影响网站安全和透露网站内部信息) <script type="text/javascript"> //该函数将获取url中的键值组合,并通过传入的键参数返回键所对应的值 function getvl(name) { var reg = new RegExp("(^|\\?|&)" + name + &q

c#获取url中的查询字符串参数

/// <summary> /// 获取url中的查询字符串参数 /// </summary> public static NameValueCollection ExtractQueryParams(string url) { int startIndex = url.IndexOf("?"); NameValueCollection values = new NameValueCollection(); if (startIndex <= 0) ret

JS获取URL中参数值(QueryString)的4种方法

在某书上看到这道题目,查找解题思路后做了部分解析,如有错误请指正 方法一:正则法 代码如下: function getQueryString(name) {    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); //匹配指定name的QueryString    var r = window.location.search.substr(1).match(reg); //window.location.sea

PHP用正则匹配获取URL中的域名

在PHP的官网上看到的parse_url()函数的替代方案.结果和parse_url()函数差不多,是使用正则实现的. URI 是 Web上可用的每种资源 - HTML文档.图像.视频片段.程序等 - 由一个通用资源标志符(Uniform Resource Identifier, 简称"URI")进行定位. 对象分组: ^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))? 12 3 4 5 6 7 8 9 测试代码如下:豪享

使用struts2的标签s:if获取url中的参数值,并与字符串常量进行比较

大家都知道,jsp中最好不要写java脚本,稍微复杂一点的逻辑都会让代码十分难看,对于维护来说简直是噩梦.但是我们又不可能完全不在jsp中写java脚本,像<%= request.getContextPath()>这种方式,很方便而且也不会让代码很难看.当jsp中需要有复杂的逻辑判断或者循环的时候,最好使用标签库来提高代码的可维护性,比如标准的JSTL库,还有很常用的struts2标签库. 比如有一个url http://127.0.0.1:8080/demo/test.jsp?id=1 ,我

C#获取URL中的参数

//获取URL中id参数  var ids = YK.Common.Util.WebKit.QueryParamValue("ids", "");         /// <summary>         /// 获取url参数的字符串类型值         /// </summary>         /// <param name="key">参数名</param>         /// &

Javascript RegExp对象---获取url中某一个参数的值

RegExp 对象 RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具. 直接量语法 /pattern/attributes实例:window.location.href:http://localhost:8100/aspx/main/ServiceCenter_list.aspx?category_id=93&page=2要匹配到的category_id=93:/category_id=\d+/g 创建 RegExp 对象的语法: new RegExp(pattern, at

js获取url中的参数,并保证获取到的参数不乱码

  //网上比较经典的js获取url中的参数的方法  function getQueryString(name) {      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");      var r = window.location.search.substr(1).match(reg);      if ( r != null ){