vue自定义错误界面
方案一:
当输入错误链接错误或者找不到页面,在router里可以定义一个404页面,具体可以这样做:在routes里面这样写:
{
path:'*',
component:error,
name:'error',
meta:{
title:'页面没找到'
}
}
注意:一定要写在routes的最后面!
方案二
在入口js文件使用了axios的拦截器
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import router from './router'
import App from './App'
Vue.use(Vuex);
Vue.prototype.$http = axios;
Vue.prototype.$http.defaults.withCredentials=true; Vue.prototype.$http.interceptors.response.use(response => {
console.log(response)
if (response.data.resCode== "1000") {
localStorage.clear();
alert(response.data.resMsg)
router.push({
name:'login'
})
}
return response;
}, error => {
if (error && error.response) {
switch (error.response.status) {
case 404:
router.push({name:'error-404'});
// error.message = '请求出错(404)'
break; case 500:
router.push({ name:'error-500'});
// error.message = '服务器错误(500)';
break; default: error.message = `连接出错(${error.response.status})!`;
}
}
return Promise.reject(error);
});
/**
* 日志输出开关
*/
Vue.config.productionTip = true
/* eslint-disable no-new */ router.beforeEach((to,from,next)=>{
window.document.title=to.meta.title;
next();
});
router.afterEach((to,form,next)=>{window.scrollTo(0,0)});
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
vue自定义错误界面的更多相关文章
- Flask从入门到精通之自定义错误界面
如果你在浏览器的地址栏中输入了不可用的路由,那么会显示一个状态码为404 的错误页面.现在这个错误页面太简陋.平庸,而且样式和使用了Bootstrap 的页面不一致. 像常规路由一样,Flask 允许 ...
- WebView 自定义错误界面,WebView 加载进度条,和Logding 效果
---恢复内容开始--- 下载地址,代码就不粘贴了 http://pan.baidu.com/s/1eQncg86 ---恢复内容结束--- 我没有判断是不是网络原因,各位自行判断吧,图片错误信息,及 ...
- tomcat项目发布 更改小猫图标 及自定义错误404界面
tomcat发布项目的时候遇到些小问题 不过解决了 问题1. 整个服务器的404自定义界面问题 解决方法: 在tomcat安装目录下conf中web.xml中修改配置文件 <error-page ...
- nginx错误界面优化和日志管理
nginx错误界面优化 在进行web访问的时候,经常会遇到网站打不开报错的情况,nginx默认的界面并不美观,我们可以通过重定向到自定义的错误页面,提升用户体验,比如淘宝的错误页面还有商品信息和广告. ...
- FineReport中如何自定义登录界面
在登录平台时,不希望使用FR默认的内置登录界面,想通过自定义登录界面实现登录操作,内置登录界面如下图: 登录界面,获取到用户名和密码的值,发送到报表系统,报表服务带着这两个参数访问认证地址进行认证. ...
- ThinkPHP自定义成功界面、失败界面、异常界面
在ThinkPHP的手册中,附录里边的配置参考,有一个模板引擎设置. 或者在手册里面的控制器,跳转和重定向里面. 紧接着,就讲到了如何自定义这些界面. 将上诉的配置参数写到到配置文件里,修改路径到自己 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- Gin框架 - 自定义错误处理
目录 概述 错误处理 自定义错误处理 panic 和 recover 推荐阅读 概述 很多读者在后台向我要 Gin 框架实战系列的 Demo 源码,在这里再说明一下,源码我都更新到 GitHub 上, ...
- vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...
随机推荐
- Mysql初级第二天(wangyun)
SQL 1.LIKE 操作符 SELECT 列名称 FROM 表名称 WHERE 列 LIKE 值('N%'/'%N%'/'%N','N_') SELECT 列名称 FROM 表名称 WHERE 列 ...
- PHP多进程非阻塞模式下结合原生Mysql与单进程效率测试对比
公司在做游戏服务器合并的时候,对大批量数据表做了合并操作,难免会出现数据格式不一致问题.根据玩家反映BUG排查,是因为某个模块下日志表出现了数据格式问题导致. 目前想到的是有两种方案解决,第一种就是把 ...
- fjwc2019 D2T2 定价 (栈+set+贪心)
#182. 「2019冬令营提高组」定价 先瞄下数据范围 对于所有数据,1≤n≤1000,1≤m≤10^9,1≤q≤500000 .\textbf{2 操作的个数不超过 1000.} $10^9$位, ...
- java不常用但很有用的问题排查工具(持续完善)
因为用的频率不是很多,老忘掉,每次都要搜下,特记录下备忘. 查看进程的启动jvm选项 [root@iZ23nn1p4mjZ ~]# jinfo -flags 16603Attaching to pro ...
- Linux限制普通用户只能使用某命令
修改sudoers(/etc/sudoers)
- Educational Codeforces Round 40 (Rated for Div. 2) Solution
从这里开始 小结 题目列表 Problem A Diagonal Walking Problem B String Typing Problem C Matrix Walk Problem D Fig ...
- bzoj 1014 火星人prefix - 链表 - 分块
Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 7 ...
- 【Python020--内嵌函数和闭包】
一.内嵌函数&闭包 1.最好是访问全局变量而不是修改全局变量,修改全局变量Python会内部屏蔽(修改后,函数会内部创建一个和全局变量一抹一样的变量) >>> count = ...
- Bootstrap3基础 img-thumbnail 给图片加一个圆角的边框
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- HDU 4366 Successor(dfs序 + 分块)题解
题意:每个人都有一个上司,每个人都有能力值和忠诚值,0是老板,现在给出m个询问,每次询问给出一个x,要求你找到x的所有直系和非直系下属中能力比他高的最忠诚的人是谁 思路:因为树上查询很麻烦,所以我们直 ...