源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-09-17 07:15 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:vue不通过路由直接获取url中参数的方法示例
[b]前言[/b] 众所周知vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的。 相对来说,在某些情况下直接在url后面拼接[code]?mid=100[/code]的方式传递参数更灵活,你不需要设置路由,只需要在url后拼接参数即可,但是这种方式就需要通过javascript获取并提取url中的参数,通过传统的方式直接在页面中获取是行不通的了,因为vue中是无法通过[code]location.search()[/code]来获取url问号之后的内容的。 当然,这个问题也有解决方法,就是把获取参数的脚本代码注册成全局方法就可以了。下面话不多说了,来一看看详细的方法示例吧。 [b]示例代码[/b] 第一步:创建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")
[b]总结[/b] 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程素材网的支持。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部