Vue通过URL传参如何控制全局console.log的开关详解


Posted in Javascript onDecember 07, 2017

前言

最近在学习vue,发现了一个问题网上相关的信息很少,所以想着总结下,本文主要给大家介绍了关于Vue通过URL传参来控制全局console.log开关的相关内容,分享出来供大家参考学习,下面话不多说了,来随着小编一起看看详细的介绍吧。

实现方法如下:

如果你的项目中console.log了很多信息,但是发到生产环境上又不想打印这些信息,这时候就需要设置一个全局变量,如:debug,

用正则匹配一下参数:

const getQueryStr = (name) => {
 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 var r = window.location.search.substr(1).match(reg);
 if (r != null) return unescape(r[2]);
 return null;
};

当链接中含有这个参数时,将debug的状态置为true,这时console.log是正常可打印状态,否则将debug的状态置为false,这时重写console.log函数:

console.log = function () {
 return false;
}

这时的全局变量就可以用在整个项目中了,用来控制一些调试窗口的显隐。

在Vue中可以直写在stores/index.js中,当然,写在其他入口文件里也可以:

const getQueryStr = (name) => {
 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 var r = window.location.search.substr(1).match(reg);
 if (r != null) return unescape(r[2]);
 return null;
};
/* 若链接后面带上参数 envFlag=monitor
 * 则将 debug 置为true,否则置为false
*/
const monitor = 'monitor';
const envFlag = getQueryStr('envFlag');
let debug = monitor ? true : false;
if (envFlag === 'monitor') {
 console.log("%cNow You Can Console Log...", "color:red;font-size:18px;font-style:oblique;");
 debug = monitor;
} else {
 debug = '';
 console.log = function () {
 return false;
 }
}
const state = {debug: debug};
export const store = new vuex.Store({state, mutations});

这时候如果你想控制一个组件的显示或隐藏,只需要在vuex的getters中声明一下就可以使用变量debug了:

<monitor v-show="debug"></monitor>
vuex: {
 getters: {
 debug: state => state.debug
 }
}

做完以上的工作后,在URL后面带上参数 envFlag=monitor 就可以看到组件 monitor 被显示出来,同时打开控制台的话,就可以看到项目所有的 console.log 信息。

总结

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

Javascript 相关文章推荐
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 #Javascript
react学习笔记之state以及setState的使用
Dec 07 #Javascript
React Native 截屏组件的示例代码
Dec 06 #Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 #jQuery
mui back 返回刷新页面的实例
Dec 06 #Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 #Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 #jQuery
You might like
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
ionic环境配置及问题详解
2017/06/27 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
Python导入txt数据到mysql的方法
2015/04/08 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
利用python实现逐步回归
2020/02/24 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
美容院店长岗位职责
2014/04/08 职场文书
青年教师个人总结
2015/02/11 职场文书
开学随笔
2015/08/15 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server