vue不通过路由直接获取url中参数的方法示例
2017-08-24 09:19
1126 查看
前言
众所周知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中的参数
- Js+Jq获取URL参数的集中方法示例代码
- ASP.NET MVC3 通过URL路由传多个参数方法
- python通过urllib2获取带有中文参数url内容的方法
- Vue中的 this.$router.push() 参数获取 (通过路由传参)
- 如何在JSP页面上直接获取url的参数呢(不通过controller设置)?
- js获取URL参数的2个方法,可以直接使用
- Js+Jq获取URL参数的集中方法示例代码
- js获取URL的参数的方法(getQueryString)示例
- python通过urllib2获取带有中文参数url内容的方法
- js获取URL的参数的方法(getQueryString)示例
- Laravel中获取路由参数Route Parameters的五种方法示例
- 内核子系统或设备驱动可以直接编译到内核,也可以编译成模块,如果编译到内核,可以使用前一节介绍的方法通过内核启动参数来向它们传递参数,如果编译成模块,则可以通过命令行在插入模块时传递参数,或者在运行时,
- js获取URL中的参数方法
- 获取文件夹大小的java类,通过类名调用方法,可直接获取文件大小
- java取得泛型的参数类型(Gson通过借助TypeToken获取泛型参数的类型的方法)
- C# 通过URL获取图片并显示在PictureBox上的方法
- python urllib获取带有中文参数url内容的方法
- JS获取当前完整的url地址以及参数的方法