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关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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 xml-rpc远程调用
2008/12/19 PHP
php 引用(&amp;)详解
2009/11/20 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
简单的自定义php模板引擎
2016/08/26 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python3 Random模块代码详解
2017/12/04 Python
python 重命名轴索引的方法
2018/11/10 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
Django静态文件加载失败解决方案
2020/08/26 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
办公室前台的岗位职责
2013/12/20 职场文书
岗位说明书怎么写
2014/07/30 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android