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 ...
随机推荐
- 怎样从外网访问内网WebSphere?
本地安装了一个WebSphere,只能在局域网内访问,怎样从外网也能访问到本地的WebSphere呢?本文将介绍具体的实现步骤. 准备工作 安装并启动WebSphere 默认安装的WebSphere端 ...
- Centos下搭建golang环境
一.下载安装包 先查看一下我的Centos版本,这里是6.4. # cat /etc/redhat-release CentOS release 6.4 (Final) 去go语言中文社区下载想要下载 ...
- JVM的垃圾回收机制
JVM的垃圾回收机制:(GC通过确定对象是否被活动对象引用来确定是否收集该对象.) 1.触发GC(Garbage Collector)的条件. (1.GC在优先级最低的线程中运行,在未运行的线程中进行 ...
- Python3 freetds.conf odbcinst.ini odbc.ini 之间的关系
Python3 freetds.conf odbcinst.ini odbc.ini 之间的关系 三者分别是FreeTDS和UnixODBC的配置文件: 1,FreeTDS中的freetds.conf ...
- oracle 18c的版本号规则
18C之后的版本标识 从2017年7月开始,Oracle改变了以往的数据库软件发布流程,采用年度Release和季度更新的策略. Yearly Release 将之前的N年一发布更改为每年一发布.每年 ...
- 静态代码检查findbugs/阿里巴巴开发规范
findbugs,基本上三类严重的bug检测出来都是比较准确的,如下: 阿里巴巴开发规范 前面两类都是比较重要的: 参考: https://blog.csdn.net/qq_27093465/arti ...
- How to Conduct High-Impact Research and Produce High-Quality Papers
How to Conduct High-Impact Research and Produce High-Quality Papers Contents From Slide Russell Grou ...
- promql查询表达式
Basics 即时矢量选择器 =:匹配与标签相等的内容!=:不匹配与标签相等的内容=~: 根据正则表达式匹配与标签符合的内容!~:根据正则表达式不匹配与标签符合的内容 示例: http_request ...
- (4opencv)如何基于GOCW,创建一个实时视频程序
直接使用提供的代码框架进行修改,是最快得到效果的方法:但是这样的灵活性较差,而且真正的程序员从来都不会停滞在这一步:我们需要的是"将框架解析到最小化.理清楚每个构建之间的关系",只 ...
- 使用Navicat for MySQL添加外键约束
转载:http://blog.csdn.net/u013215018/article/details/54981216 现在有两个表一张是Roles表(角色表),一张是RoleUser表(用户角色) ...