前言
最近在学习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 "%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 信息。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“Vue通过URL传参如何控制全局console.log的开关详解”评论...
更新动态
2024年11月13日
2024年11月13日
- 群星《2023好听新歌28》十倍音质 U盘音乐[WAV分轨][1G]
- faker拿了几个全球冠军 faker全球冠军数量介绍
- 英雄联盟faker拿了多少个冠军 Faker获得冠军数量介绍
- 英雄联盟全华班有夺冠过吗 英雄联盟全华班有没有夺过冠
- ChadCrouch-BartonCreekSoundwalk(2024)[24Bit-96kHz]FLAC
- BestAudiophileVoices4(2005)[FLAC]
- 常月《中国红》[DTS-WAV分轨]
- 国外《CS》选手抱怨上海major外设:桌子不能调节
- 美女推主COS合集图赏
- FS社母公司角川宣布:旗下共有26款游戏积极开发中!
- 黄莺莺.1984-炎夏的梦(2004环球复黑王)【宝丽金】【WAV+CUE】
- 黄雅莉.2009-雅莉不怕【福茂】【FLAC分轨】
- 张宇.1997-温古知新一个人的天荒地老【EMI百代】【WAV+CUE】
- 「灵与火的织卷」前瞻讨论开启 参与赢原石
- 【原神手游】原神基尼奇生日快乐