前言
最近在學(xué)習(xí)vue，發(fā)現(xiàn)了一個問題網(wǎng)上相關(guān)的信息很少，所以想著總結(jié)下，本文主要給大家介紹了關(guān)于Vue通過URL傳參來控制全局console.log開關(guān)的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來隨著小編一起看看詳細(xì)的介紹吧。
實(shí)現(xiàn)方法如下：
如果你的項(xiàng)目中console.log了很多信息，但是發(fā)到生產(chǎn)環(huán)境上又不想打印這些信息，這時(shí)候就需要設(shè)置一個全局變量，如：debug，
用正則匹配一下參數(shù)：
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;};當(dāng)鏈接中含有這個參數(shù)時(shí)，將debug的狀態(tài)置為true，這時(shí)console.log是正常可打印狀態(tài)，否則將debug的狀態(tài)置為false，這時(shí)重寫console.log函數(shù)：
console.log = function () { return false;}這時(shí)的全局變量就可以用在整個項(xiàng)目中了，用來控制一些調(diào)試窗口的顯隱。
在Vue中可以直寫在stores/index.js中,當(dāng)然，寫在其他入口文件里也可以：
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;};/* 若鏈接后面帶上參數(shù) 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});這時(shí)候如果你想控制一個組件的顯示或隱藏，只需要在vuex的getters中聲明一下就可以使用變量debug了：
<monitor v-show="debug"></monitor>vuex: { getters: { debug: state => state.debug }}做完以上的工作后，在URL后面帶上參數(shù) envFlag=monitor 就可以看到組件 monitor 被顯示出來，同時(shí)打開控制臺的話，就可以看到項(xiàng)目所有的 console.log 信息。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
