vue通过url传参怎样控制全局console.log的开关-mile米乐体育

这篇文章给大家分享的是有关vue通过url传参怎样控制全局console.log的开关的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

实现方法如下：

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

用正则匹配一下参数：

constgetquerystr=(name)=>{ varreg=newregexp("(^|&)" name "=([^&]*)(&|$)","i"); varr=window.location.search.substr(1).match(reg); if(r!=null)returnunescape(r[2]); returnnull; };

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

console.log=function(){ returnfalse; }

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

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

constgetquerystr=(name)=>{ varreg=newregexp("(^|&)" name "=([^&]*)(&|$)","i"); varr=window.location.search.substr(1).match(reg); if(r!=null)returnunescape(r[2]); returnnull; }; /*若链接后面带上参数envflag=monitor *则将debug置为true，否则置为false */ constmonitor='monitor'; constenvflag=getquerystr('envflag'); letdebug=monitor?true:false; if(envflag==='monitor'){ console.log("%cnowyoucanconsolelog...","color:red;font-size:18px;font-style:oblique;"); debug=monitor; }else{ debug=''; console.log=function(){ returnfalse; } } conststate={debug:debug}; exportconststore=newvuex.store({state,mutations});

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

 vuex:{ getters:{ debug:state=>state.debug } }

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

感谢各位的阅读！关于“vue通过url传参怎样控制全局console.log的开关”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！