Vue通過URL傳參如何控制全局console.log的開關(guān)詳解
前言
最近在學(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è)置一個全局變量，如：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ù)時，將debug的狀態(tài)置為true，這時console.log是正?？纱蛴顟B(tài)，否則將debug的狀態(tài)置為false，這時重寫console.log函數(shù)：
console.log = function () {
return false;
}
這時的全局變量就可以用在整個項(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});
這時候如果你想控制一個組件的顯示或隱藏，只需要在vuex的getters中聲明一下就可以使用變量debug了：
<monitor v-show="debug"></monitor>
vuex: {
getters: {
debug: state => state.debug
}
}
做完以上的工作后，在URL后面帶上參數(shù) envFlag=monitor 就可以看到組件 monitor 被顯示出來，同時打開控制臺的話，就可以看到項(xiàng)目所有的 console.log 信息。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
利用nodeJS+vue圖片上傳實(shí)現(xiàn)更新頭像的過程
Vue是一套構(gòu)建用戶界面的框架,最近工作中遇到了一個需求,需要做一個更新頭像的通能,下面這篇文章主要給大家介紹了關(guān)于利用nodeJS+vue圖片上傳的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue-cropper實(shí)現(xiàn)裁剪圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
vue使用js-file-download完成導(dǎo)出功能實(shí)例
這篇文章主要介紹了vue使用js-file-download完成導(dǎo)出功能實(shí)例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要和大家一起聊一聊Vue.js過渡效果、CSS 過渡效果、純 JavaScript過渡效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
解決vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問題
這篇文章主要介紹了vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)的問題,本文通過實(shí)例結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue中如何動態(tài)獲取剩余區(qū)域的滾動高度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家介紹了Vue3之列表動畫和狀態(tài)動畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
vue生成token保存在客戶端localStorage中的方法
本篇文章主要介紹了vue生成token保存在客戶端localStorage中的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了詳解vue 自定義組件使用v-model 及探究其中原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue Promise解決回調(diào)地獄問題實(shí)現(xiàn)方法
這篇文章主要介紹了Vue Promise解決回調(diào)地獄問題，總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2023-01-01