Vue通過URL傳參如何控制全局console.log的開關詳解

來源：懂視網責編：小OO 時間：2020-11-27 22:24:16

Vue通過URL傳參如何控制全局console.log的開關詳解

前言；最近在學習vue，發現了一個問題網上相關的信息很少，所以想著總結下，本文主要給大家介紹了關于Vue通過URL傳參來控制全局console.log開關的相關內容，分享出來供大家參考學習，下面話不多說了，來隨著小編一起看看詳細的介紹吧。實現方法如下：如果你的項目中console.log了很多信息，但是發到生產環境上又不想打印這些信息，這時候就需要設置一個全局變量，如：debug。用正則匹配一下參數。

推薦度：

點擊下載本文 文檔為doc格式

導讀前言；最近在學習vue，發現了一個問題網上相關的信息很少，所以想著總結下，本文主要給大家介紹了關于Vue通過URL傳參來控制全局console.log開關的相關內容，分享出來供大家參考學習，下面話不多說了，來隨著小編一起看看詳細的介紹吧。實現方法如下：如果你的項目中console.log了很多信息，但是發到生產環境上又不想打印這些信息，這時候就需要設置一個全局變量，如：debug。用正則匹配一下參數。

前言

最近在學習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 ? 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后面帶上參數 envFlag=monitor 就可以看到組件 monitor 被顯示出來，同時打開控制臺的話，就可以看到項目所有的 console.log 信息。

總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Vue通過URL傳參如何控制全局console.log的開關詳解

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 全局參數

熱門焦點

Vue通過URL傳參如何控制全局console.log的開關詳解

Vue通過URL傳參如何控制全局console.log的開關詳解

Vue通過URL傳參如何控制全局console.log的開關詳解

最新推薦

猜你喜歡

熱門推薦