這篇文章主要為大家介紹了關於Vue根據URL傳參如何控制全局console.log開關的相關資料,文中透過範例程式碼介紹的非常詳細,對大家的學習或工作具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
前言
最近在學習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 資訊。
上面是我整理給大家的,希望今後對大家有幫助。
相關文章:
#如何將vue2.0 和animate.css合併在一起使用(詳細教程)
以上是在Vue中如何控制全域console.log開關的詳細內容。更多資訊請關注PHP中文網其他相關文章!