vue如何屏蔽报错弹窗

img


如图报错弹窗，因需求需要屏蔽，如何屏蔽掉，让其不会显示在页面上

应该请求拦截那里吧

排查下是当前接口返回的meaasge还是全局的，直接注释或者根据实际情况处理一下就行了

img

全局搜索这个提示，或者看看哪个接口报错，注释或者不处理

  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7406013
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue实现未登陆情况下，先跳转登陆页面，登陆完成后，继续访问登陆前的页面
  • 除此之外, 这篇博客: Vue笔记中的 使用私有过滤器实现，当私有过滤器和全局过滤器名字一样的时候，优先使用私有过滤器 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="./lib/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model="id">
		<input type="text" v-model="name">
		<input type="button" value="添加" v-on:click="add()">
		<input type="text" v-model="keywords">
		<table>
			<thead>
				<tr>
					<td>Id</td>
					<td>Name</td>
					<td>Ctime</td>
					<td>Operation</td>
				</tr>
			</thead>
			<tbody>
				<!-- 通过一个动态函数，来获取过滤以后的list -->
				<tr v-for="car in search(keywords)" v-bind:key="car.id">
					<td>{{car.id}}</td>
					<td v-text="car.name"></td>
					<!-- 当不传入pattern的时候，pattern默认为"" -->
					<td>{{car.ctime | timeFilter()}}</td>
					<!-- 使用prevent来阻止a标签的刷新页面 -->
					<td><a href="" v-on:click.prevent="del(car.id)">删除</a></td>
				</tr>
			</tbody>
		</table>
	</div>
	<script type="text/javascript">
		// 设置全局的过滤器
		Vue.filter('timeFilter',function(data,pattern=""){
			//根据传入的模式判断要什么格式的时间
			var date=new Date(data)
			var y=date.getFullYear()
			var m=date.getMonth()+1
			var d=date.getDate()
			// 如果是yyyy-mm-dd那么就返回这个格式
			if(pattern.toLowerCase()=='yyyy-mm-dd'){
				// 使用``来格式化输出，${}为占位符
				return `${y}-${m}-${d}`
			} else{
				var h=date.getHours()
				var min=date.getMinutes()
				var s=date.getSeconds()
				return `${y}-${m}-${d} ${h}:${min}:${s}`
			}
		})
		var vm=new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'宝马',ctime:new Date()},
					{id:2,name:'奔驰',ctime:new Date()}
				],
				id:"",
				name:"",
				keywords:""
			},
			methods:{
				add(){
					var car={id:this.id,name:this.name,ctime:new Date()}
					this.list.push(car)
					this.id=""
					this.name=""
				},
				del(id){
					// 循环list,当其中的id等于传入的id的时侯，暂停循环，其中的i，代表的是index,用index才能删除
					// this.list.some((item,index)=>{
					// 	if(item.id == id){
					// 		// 删除一个，位置为index
					// 		this.list.splice(index,1);
					// 		//返回true时，退出循环
					// 		return true;
					// 	}
					// })
					// 同理，先获得index,再删除
					var index=this.list.findIndex(item=>{
						if(item.id == id){
							return true;
						}
					})
					this.list.splice(index,1);
				},
				search(keywords){
					// // 新建一个list，用来存放结果
					// var newList=[]
					// // 循环原来的list
					// this.list.forEach(item=>{
					// 	// 如果单个个体中.indexOf(keywords)!=-1,说明在这里面找到了这串字符串，即可以添加到新的数组中去。
					// 	// 同时，这个方法对于当keywords=""的情况也是能找到的所以比较适合用这个方法
					// 	if(item.name.indexOf(keywords)!=-1){
					// 		newList.push(item)
					// 	}
					// })
					// return newList


					// 这个函数可以返回一个新的数组，而这个数组自己定义，不断返回叠加形成要返回的数组
					return this.list.filter(item=>{
						// 当满足条件，那么就返回一个item给新的list
						if(item.name.includes(keywords)){
							return item;
						}
					})
				}
			},
			filters:{ //私有的过滤器
				timeFilter:function(data,pattern=""){
					//根据传入的模式判断要什么格式的时间
					var date=new Date(data)
					var y=date.getFullYear()
					var m=date.getMonth()+1
					var d=date.getDate()
					// 如果是yyyy-mm-dd那么就返回这个格式
					if(pattern.toLowerCase()=='yyyy-mm-dd'){
						// 使用``来格式化输出，${}为占位符
						return `${y}-${m}-${d}`
					} else{
						var h=date.getHours()
						var min=date.getMinutes()
						var s=date.getSeconds()
						return `${y}-${m}-${d} ${h}:${min}:${s}~~~~~~~~~~~`
					}
				}
			}
		})
	</script>
</body>
</html>
  • 您还可以看一下 耿职老师的VUE开发旅游攻略移动端，零基础到实战，短信验证码，登录，注册课程中的 课程简介及成果展示小节, 巩固相关知识点