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

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

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

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

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

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

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

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

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

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

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

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

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

  2. VUE中获取url中的值

    如图:获取值 一:main.js中写入 const router = new VueRouter({ routes: [ { path: '/goodsinfo/:goodsId', componen ...

  3. [工具类]获取url中参数列表

    写在前面 在项目中经常用到解析url中参数的逻辑,今天先下载就自己封装了一个方法,方便以后使用的时候,信手拈来.当然这里给出的方法是针对常见的url参数类型的,对于重写url,或者路由格式的不考虑. ...

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

    在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数 ...

  5. 记录一次bug解决过程:velocity中获取url中的参数

    一.总结 在Webx的Velocity中获取url中参数:$rundata.getRequest().getParameter('userId') 在Webx项目中,防止CSRF攻击(Cross-si ...

  6. 使用JS,获取URL中指定参数的值

    /** * 获取URL中指定参数的值 * * @param name 参数名称 * @returns */ function getQueryString(name) { var reg = new ...

  7. js获取URL中的参数

    js获取URL中的一些参数的意思 location对象 含有当前URL的信息. 属性 href 整个URL字符串. protocol 含有URL第一部分的字符串,如http: host 包含有URL中 ...

  8. APPCAN开发笔记:html页面之间的参数传递:使用js获取url中的参数,以及在APPCAN中不能使用的解决方法

    用PHP的GET/POST方式来传递方式已经是司空见惯了,但是如果我的页面是一个静态的html的页面,想传递参数的时候要怎么办呢?在APPCAN的开发中我们会经常遇到这样的问题,因为所有的页面都是静态 ...

  9. javaScript获取url中的参数

    var urlTools = { //获取RUL参数值 getUrlParam: function(name) { /*?videoId=identification */ var params = ...

随机推荐

  1. gulp入坑系列(3)——创建多个gulp.task

    继续gulp的爬坑路,在准备get更多gulp的具体操作之前,先来明确一下在gulp中创建和使用多个task任务的情况. gulp所要做的操作都写在gulp.task()中,系统有一个默认的defau ...

  2. JavaScript this特性,静态方法 和实例方法,prototype

    <script type="text/javascript"> function logs(str) { document.write(str + "< ...

  3. Objective-C学习笔记---构造函数和析构函数

    简单的讲,构造函数就是在创建一个对象的时候起到初始化的作用,对这个对象里的一些成员变量进行初始化,析构函数就是在对象被删除进行一些清理工作,也就是专门的扫尾工作,下面用代码来进行具体说明. 一.构造函 ...

  4. Emacs常用命令汇总

    注意:以下命令中标注的按键,大写的C代表Control,在键盘上通常是Ctrl键,而M代表Meta,在键盘上通常是Alt键,S则代表Shift,在键盘上通常是Shift键,也就是 C Control ...

  5. 我为什么用 SQLite 和 FMDB 而不用 Core Data

    凭良心讲,我不能告诉你不去使用Core Data.它不错,而且也在变好,并且它被很多其他Cocoa开发者所理解,当有新人加入你的组或者需要别人接手你的项目的时候,这点很重要.更重要的是,不值得花时间和 ...

  6. java异常 总结

    异常: 是什么?是对问题的描述,将问题进行对象的封装. 异常体系: Throwable |--Error |--Exception |--RuntimeException 异常体系的特点: 异常体系中 ...

  7. android文件存储位置切换

    最近有个需求,助手的google卫星地图和OpenCycleMap下载的离线地图数据,要能够在内置存储和外置存储空间之间切换,因为离线瓦片数据非常大,很多户外用户希望将这些文件存储在外置TF卡上,不占 ...

  8. [Weblogic]如何清理缓存

    背景:在开发调试或测试时,很多时候重新更新部署服务后会发现某些更新并没有体现到,还是之前的情况,也或者会出现其他错误问题,这个时候就要考虑到可能是weblogic缓存未清理引起. 清理缓存步骤如下: ...

  9. iperf测试

    在服务端运行iperf,输入命令iperf –s –p 12345 –i 1 –M 以在本机端口12345上启用iperf 在客户端运行iperf,输入命令iperf –c server-ip –p  ...

  10. JavaScript Patterns 2.11 Writing Comments

    Document all functions, their arguments and return values, and also any interesting or unusual algor ...