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


Posted in Javascript onAugust 24, 2017

前言

众所周知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")

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 #Javascript
JS实现电商放大镜效果
Aug 24 #Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 #Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 #jQuery
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 #Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 #Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 #Javascript
You might like
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
JS之小练习代码
2008/10/12 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
python中的unittest框架实例详解
2021/02/05 Python
Gap英国官网:Gap UK
2018/07/18 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
社区十八大感言
2014/01/19 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
大学生创业策划书
2014/02/02 职场文书
60句有关成长的名言
2019/09/04 职场文书
Django实现聊天机器人
2021/05/31 Python