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 ...
随机推荐
- Spring Aop 代理
AOP 面向切面编程 底层就是 动态代理模式 代理模式是java中常用的设计模式. 特点为: 1 委托类和代理类有相同的接口,或共同的父类(保证使用一样的方法) 2 代理类为委托类负责处理消息,并将 ...
- 获取微信access_token
/** * 获取微信access_token * @return mixed */function get_access_token() { $appId = C('APPID'); $secret ...
- Linux学习笔记之Linux环境变量总结
0x00 概述 Linux是一个多用户多任务的操作系统,可以在Linux中为不同的用户设置不同的运行环境,具体做法是设置不同用户的环境变量. 0x01 Linux环境变量分类 按照生命周期来分,Lin ...
- 【题解】Luogu UVA12345 Dynamic len(set(a[L:R]))
原题传送门 这题要用动态莫队,我博客里有介绍 这道题和luogu P1903 [国家集训队]数颜色 / 维护队列差不多,解法就在上面那篇博客里qaq 主要的问题是如何排序? 排序有三个关键字: 1.左 ...
- python识别图片生成字符模式
此python文件来自D7哥, 放在这里备份. 用法 python3 PIL\&argparse.py 1.jpg -o test.txt --width 300 --height 300 p ...
- 搭建ldap自助修改密码系统--Self Service Password
系统版本:centos6 Self Service Password版本:1.1 服务安装: 安装依赖:yum install php70-ldap.x86_64 -y (版本尽量大于5.3,否则会提 ...
- Linux下查看网卡驱动和版本信息
Linux下查看网卡驱动和版本信息 查看网卡生产厂商和信号 查看基本信息:lspci 查看详细信息:lspci -vvv # 3个小写的v 查看网卡信息:lspci | grep Ethernet 查 ...
- CentOS7 搭建Docker
搭建环境 Docker支持一下的CentOS版本 CentOS 6.5 (64-bit)或者更高版本 CentOS 7 (64-bit) 搭建条件 Docker运行在CentOS 7上,要求系统64位 ...
- 【做题】Codeforces Round #429 (Div. 2) E. On the Bench——组合问题+dp
题目大意是给你n个数,求相邻两数相乘不是完全平方数的排列数. 一开始看到这题的时候,本人便想给相乘为完全平方数的数对建边,然后就写萎了... 后来通过集体智慧发现这个重要性质:对于自然数a,b,c,若 ...
- IAR8.11.1安装与破解教程
IAR 8.11.1的安装与破解 1.IAR的安装 (1) (2)然后选择自己的调试方式驱动(jtag与swd...) (3)选择路径,一直下一步就好 ...