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 信息。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • vue不通过路由直接获取url中参数的方法示例

    前言 众所周知vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接在url后面拼接?mid=100的方式传递参数更灵活,你不需要设置路由,只需要在url后拼接参数即可,但是这种方式就需要通过javascript获取并提取url中的参数,通过传统的方式直接在页面中获取是行不通的了,因为vue中是无法通过location.search()来获取url问号之后的内容的. 当然,这个问题也有解决方法,就是把

  • Vue通过URL传参如何控制全局console.log的开关详解

    前言 最近在学习vue,发现了一个问题网上相关的信息很少,所以想着总结下,本文主要给大家介绍了关于Vue通过URL传参来控制全局console.log开关的相关内容,分享出来供大家参考学习,下面话不多说了,来随着小编一起看看详细的介绍吧. 实现方法如下: 如果你的项目中console.log了很多信息,但是发到生产环境上又不想打印这些信息,这时候就需要设置一个全局变量,如:debug, 用正则匹配一下参数: const getQueryStr = (name) => { var reg = ne

  • vue路由传参方式的方式总结及获取参数详解

    目录 一.声明式传参 1.params传参(显示参数) 2.params传参(不显示参数) 3.query 传参 二.编程式传参 1.params传参(显示参数) 2.params传参(不显示参数) 3.query 传参 三.获取参数 1.params的获取方式 2.query的获取方式 四.需要注意的点 总结 一.声明式传参 1.params传参(显示参数) 在url中会显示出传参的值,刷新页面不会失去拿到的参数,使用该方式传值的时候,需要子路由提前配置好参数: //路由参数配置 const

  • 如何处理vue router 路由传参刷新页面参数丢失

    如何处理vue router 路由传参刷新页面参数丢失

    概述 常见场景:点击列表的详情,跳转到详情内页,在内页根据传递的参数获取详情数据. 路由传参一般有如下几种方式,下面主要介编程式导航 router.push 的传参方式: 方法一:通过 params 传参 路由配置如下: { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { thi

  • vue中路由传参以及跨组件传参详解

    路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</router-link> 路由

  • 详解Vue 路由组件传参的 8 种方式

    详解Vue 路由组件传参的 8 种方式

    我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router@4 . 编程式路由传参 除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. 1. 通过 params 传递 路由配置 路径参数 用冒号 : 表示. const routes = [ // 动态段以冒号开始 { pat

  • 详解uniapp页面跳转URL传参大坑

    案例 展示电影详情,传递电影的id.从search.vue传递到movie.vue methods: { showMovie(e){ var trailerid = e.currentTarget.dataset.trailerid; // console.log(trailerid); uni.navigateTo({ url: '../movie/movie?trailerId='+trailerid, success: res => {}, fail: () => {}, complet

  • JSP struts2 url传参中文乱码解决办法

    JSP struts2 url传参中文乱码解决办法 1.设置struts.xml <constant name="struts.i18n.encoding" value="UTF-8" /> 或是设置struts.properties(我自己没试过) struts.i18n.encoding=UTF-8 2.在web.xml添加编码过滤器 <filter> <filter-name>characterEncodingFilter&

  • 用js通过url传参把数据从一个页面传到另一个页面

    用js把数据从一个页面传到另一个页面的层里? 如果是传到新页面的话,你网站基于什么语言开发直接用get或者post获取,然后输出到这个层 通过url传参 如果是HTML页面的话JS传到新页面就window.location.href='a.html?id=100';然后a.html页面的JS就<div id="s"></div> <script> document.getElementById("s").innerHTML=win

  • 基于Django URL传参 FORM表单传数据 get post的用法实例

    POST和GET是web开发中常用的表单交互方法,是构建web前后端交互系统的顶梁柱,现将Django中的简单用法示例记录下来,以供后续查询和其他同学参考 1.URL传参 #前端html的链接中用模版标签把参数"x"传递给achievement这个应用的yearcontent方法 <td><a href={% url 'achievement:yearcontent' x %} >{{ x }}</a></td> #urls.py中用正则

  • vue slot与传参实例代码讲解

    插槽分为默认插槽和具名插槽: 默认插槽: //父组件 <div> <h3>父组件</h3> <testChild> <div>默认插槽</div> </testChild> </div> //子组件 <div> <h4>子组件</h4> <slot></slot> </div> 具名插槽: 注意:具名插槽需要包裹在  template  标

随机推荐