前言:为什么要不通过路由直接获取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. 数码管问题(c++实现)

    描述:液晶数码管用七笔阿拉数字表示的十个数字,把横和竖的一 个短划都称为一笔,即7有3笔,8有7笔等.对于十个数字一种排列,要做到 两相邻数字都可以由另一个数字加上几笔或减去几笔组成,但不能又加又减. ...

  2. 使用Vue编写点击数字小游戏

    使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果 ...

  3. ABAP指针

    1. 什么是ABAP指针:在ABAP里面,field symbol就相当于c语言的指针.如果你定义并且分配了相应的结构或者变量给它,其实它就指向这个结构或者变量的地址,如果修改了field symbo ...

  4. 模拟Select-Options对象实现多项数据输入功能

       模拟Select-Options对象实现多项数据输入功能 Select-Options对象可以同时输入多项值并将所输入数据存入内表以供程序使用,不过Select-Options的功能有一定的局限 ...

  5. 关于ArcGIS10.0中的栅格计算中的函数

    版本升级确实很重要,在ArcGIS10.1中计算成功的,在10.0中出了问题. 问题 在进行栅格计算时,计算公式很简单,包括两个Ln函数: "-22.73 + 11.1 * Ln(5) + ...

  6. 深入理解Linux字符设备驱动

    文章从上层应用访问字符设备驱动开始,一步步地深入分析Linux字符设备的软件层次.组成框架和交互.如何编写驱动.设备文件的创建和mdev原理,对Linux字符设备驱动有全面的讲解.本文整合之前发表的& ...

  7. iOS开发之保存照片到自己创建的相簿

    iOS开发之保存照片到自己创建的相簿 保存照片还可以用ALAssetsLibrary,ALAssetsLibrary提供了我们对iOS设备中的相片.视频的访问,是连接应用程序和相册之间访问的一个桥梁. ...

  8. 在MAC下搭建JSP开发环境

    1.Mac下JDK的下载安装及配置 在安装jdk之后,需要为jdk安装目录配置环境变量: 任意打开终端,默认是家目录的,然后直接输入: touch .bash_profile 然后输入:vi .bas ...

  9. 浅谈iOS中的单例模式

    iOS中的单例模式     就我本身理解而言,我认为的单例:单例在整个工程中,就相当于一个全局变量,就是不论在哪里需要用到这个类的实例变量,都可以通过单例方法来取得,而且一旦你创建了一个单例类,不论你 ...

  10. python sorted用法

    python列表排序 python字典排序 sorted List的元素可以是各种东西,字符串,字典,自己定义的类等. sorted函数用法如下: sorted(data, cmp=None, key ...