vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取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中的参数的更多相关文章
- vue不通过路由直接获取url中参数的方法示例
vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...
- VUE中获取url中的值
如图:获取值 一:main.js中写入 const router = new VueRouter({ routes: [ { path: '/goodsinfo/:goodsId', componen ...
- [工具类]获取url中参数列表
写在前面 在项目中经常用到解析url中参数的逻辑,今天先下载就自己封装了一个方法,方便以后使用的时候,信手拈来.当然这里给出的方法是针对常见的url参数类型的,对于重写url,或者路由格式的不考虑. ...
- 如何获取url中的参数并传递给iframe中的报表
在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数 ...
- 记录一次bug解决过程:velocity中获取url中的参数
一.总结 在Webx的Velocity中获取url中参数:$rundata.getRequest().getParameter('userId') 在Webx项目中,防止CSRF攻击(Cross-si ...
- 使用JS,获取URL中指定参数的值
/** * 获取URL中指定参数的值 * * @param name 参数名称 * @returns */ function getQueryString(name) { var reg = new ...
- js获取URL中的参数
js获取URL中的一些参数的意思 location对象 含有当前URL的信息. 属性 href 整个URL字符串. protocol 含有URL第一部分的字符串,如http: host 包含有URL中 ...
- APPCAN开发笔记:html页面之间的参数传递:使用js获取url中的参数,以及在APPCAN中不能使用的解决方法
用PHP的GET/POST方式来传递方式已经是司空见惯了,但是如果我的页面是一个静态的html的页面,想传递参数的时候要怎么办呢?在APPCAN的开发中我们会经常遇到这样的问题,因为所有的页面都是静态 ...
- javaScript获取url中的参数
var urlTools = { //获取RUL参数值 getUrlParam: function(name) { /*?videoId=identification */ var params = ...
随机推荐
- osx的终端软件iterm2 之 修改外观 和 常用快捷键小结
1.修改外观:透明,自己配色,最好还有个透明的小背景,比如这样: 那么你就要这样修改: 2.快捷键小结 (1)⌘ + d 横着分屏 / ⌘ + shift + d 竖着分屏 : 适合多操作的时候 ( ...
- 关于ApplicationPoolIdentity
一直以来IIS中的网站默认都是以network service在运行,但是从IIS7开始,默认会以ApplicationPoolIdentity运行. 这个账户比较特殊,是一种虚拟帐户,你无法在计算机 ...
- oracle断电重启之ORA-00600[4194]
1.问题描述 Oracle服务器断电重启以后无法数据库无法正常连接,使用sqlplus envision/envision连接报错.常见的错误有以下这些: ORA-12518: TNS:listene ...
- swift基础一
// swift中导入类库使用import,不再使用<>和"" import Foundation // 输出 print("Hello, World!&qu ...
- C语言-09-文件操作
文件类型 文本文件(ASCII) 简单的文本文件,可用任何文字处理程序阅读 二进制文件 包含 在ASCII及扩展ASCII字符中编写的数据或程序指令 的文件,通常图形文件及文字处理程序等计算机程序都属 ...
- 在Web api2 中传递复杂参数的一点心得
这两天在做的一个项目基于webapi2,期间遇到了复杂参数传递的问题.其中刚好看到园友的这篇文章,但是我测试收结果是失败的,还不知道是什么原因.最终经过思考后,找到了一种方法,和大家分享下. 在前端我 ...
- Eclipse中使用Working Set来管理项目
Eclipse作为一款流行的JavaIDE开发工具,其有很多好用的功能为我们的开发提供帮助.但我们的工作空间中有很多项目时,管理起来就很头疼了. 但是我们又不想更换工作区间,所以我们需要一个更加有效的 ...
- CListCtrl
CListCtrl CCmdTarget └CListCtrl CListCtrl类封装"列表视图控件"功能,显示每个包含图标(列表视图中)和标签的收集.除图标和标签外,每 ...
- 在matlab2015b中配置vlfeat-0.9.18
参考链接: 1.http://cnyubin.com/?p=85 2.http://www.cnblogs.com/woshitianma/p/3872939.html ...
- matlab2015b调用摄像头
参考链接:http://blog.csdn.net/lyqmath/article/details/7307429 本人电脑是宏碁T5000 调用代码: % By lyqmathclc; clear ...