Vue通過(guò)URL傳參如何控制全局console.log的開關(guān)詳解
前言
最近在學(xué)習(xí)vue，發(fā)現(xiàn)了一個(gè)問(wèn)題網(wǎng)上相關(guān)的信息很少，所以想著總結(jié)下，本文主要給大家介紹了關(guān)于Vue通過(guò)URL傳參來(lái)控制全局console.log開關(guān)的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)隨著小編一起看看詳細(xì)的介紹吧。
實(shí)現(xiàn)方法如下：
如果你的項(xiàng)目中console.log了很多信息，但是發(fā)到生產(chǎn)環(huán)境上又不想打印這些信息，這時(shí)候就需要設(shè)置一個(gè)全局變量，如：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)鏈接中含有這個(gè)參數(shù)時(shí)，將debug的狀態(tài)置為true，這時(shí)console.log是正?？纱蛴顟B(tài)，否則將debug的狀態(tài)置為false，這時(shí)重寫console.log函數(shù)：
console.log = function () {
return false;
}
這時(shí)的全局變量就可以用在整個(gè)項(xiàng)目中了，用來(lái)控制一些調(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í)候如果你想控制一個(gè)組件的顯示或隱藏，只需要在vuex的getters中聲明一下就可以使用變量debug了：
<monitor v-show="debug"></monitor>
vuex: {
getters: {
debug: state => state.debug
}
}
做完以上的工作后，在URL后面帶上參數(shù) envFlag=monitor 就可以看到組件 monitor 被顯示出來(lái)，同時(shí)打開控制臺(tái)的話，就可以看到項(xiàng)目所有的 console.log 信息。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Vue3.x源碼調(diào)試的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue3.x源碼調(diào)試的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue3項(xiàng)目如何配置按需自動(dòng)導(dǎo)入API組件unplugin-auto-import
這篇文章主要介紹了vue3項(xiàng)目如何配置按需自動(dòng)導(dǎo)入API組件unplugin-auto-import問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue infinite update loop的問(wèn)題解決
這篇文章主要介紹了Vue "...infinite update loop..."的問(wèn)題解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了Vue+ssh框架實(shí)現(xiàn)在線聊天，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue.js實(shí)現(xiàn)h5機(jī)器人聊天（測(cè)試版）
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)h5機(jī)器人聊天測(cè)試版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要為大家詳細(xì)介紹了vue-hook-form的使用方法，以及如何安裝vue-hook-form，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問(wèn)題
這篇文章主要介紹了Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-11-11
這篇文章主要為大家詳細(xì)介紹了基于Vue.js實(shí)現(xiàn)tab滑塊效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue項(xiàng)目中定時(shí)器無(wú)法清除的原因解決
頁(yè)面有定時(shí)器,并且定時(shí)器在離開頁(yè)面時(shí),有清除,本文主要介紹了vue項(xiàng)目中定時(shí)器無(wú)法清除的原因解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
Vue+Echarts實(shí)現(xiàn)基本K線圖的繪制
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)基本K線圖的繪制，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03