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 相关文章推荐
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
原生js轮播特效
May 18 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
vue实现简单学生信息管理
May 30 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
js表数据排序 sort table data
2009/02/18 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
python实现分页效果
2017/10/25 Python
python中Apriori算法实现讲解
2017/12/10 Python
用Python读取几十万行文本数据
2018/12/24 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
python实现控制COM口的示例
2019/07/03 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
python中关于数据类型的学习笔记
2020/07/19 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
Python安装Bs4的多种方法
2020/11/28 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
前台接待岗位职责
2013/12/03 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
计划生育标语
2014/06/23 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Redis高可用集群redis-cluster详解
2022/03/20 Redis