方案一:

当输入错误链接错误或者找不到页面,在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自定义错误界面的更多相关文章

  1. Flask从入门到精通之自定义错误界面

    如果你在浏览器的地址栏中输入了不可用的路由,那么会显示一个状态码为404 的错误页面.现在这个错误页面太简陋.平庸,而且样式和使用了Bootstrap 的页面不一致. 像常规路由一样,Flask 允许 ...

  2. WebView 自定义错误界面,WebView 加载进度条,和Logding 效果

    ---恢复内容开始--- 下载地址,代码就不粘贴了 http://pan.baidu.com/s/1eQncg86 ---恢复内容结束--- 我没有判断是不是网络原因,各位自行判断吧,图片错误信息,及 ...

  3. tomcat项目发布 更改小猫图标 及自定义错误404界面

    tomcat发布项目的时候遇到些小问题 不过解决了 问题1. 整个服务器的404自定义界面问题 解决方法: 在tomcat安装目录下conf中web.xml中修改配置文件 <error-page ...

  4. nginx错误界面优化和日志管理

    nginx错误界面优化 在进行web访问的时候,经常会遇到网站打不开报错的情况,nginx默认的界面并不美观,我们可以通过重定向到自定义的错误页面,提升用户体验,比如淘宝的错误页面还有商品信息和广告. ...

  5. FineReport中如何自定义登录界面

    在登录平台时,不希望使用FR默认的内置登录界面,想通过自定义登录界面实现登录操作,内置登录界面如下图: 登录界面,获取到用户名和密码的值,发送到报表系统,报表服务带着这两个参数访问认证地址进行认证. ...

  6. ThinkPHP自定义成功界面、失败界面、异常界面

    在ThinkPHP的手册中,附录里边的配置参考,有一个模板引擎设置. 或者在手册里面的控制器,跳转和重定向里面. 紧接着,就讲到了如何自定义这些界面. 将上诉的配置参数写到到配置文件里,修改路径到自己 ...

  7. vue自定义指令clickoutside扩展--多个元素的并集作为inside

    都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...

  8. Gin框架 - 自定义错误处理

    目录 概述 错误处理 自定义错误处理 panic 和 recover 推荐阅读 概述 很多读者在后台向我要 Gin 框架实战系列的 Demo 源码,在这里再说明一下,源码我都更新到 GitHub 上, ...

  9. vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法

    首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...

随机推荐

  1. 推荐:全新Java开发思维导图

    蓦然回首自己做开发已经十年了,这十年中我获得了很多,技术能力.培训.出国.大公司的经历,还有很多很好的朋友. 但再仔细一想,这十年中我至少浪费了五年时间,这五年可以足够让自己成长为一个优秀的程序员,可 ...

  2. oracle闪回、闪回数据归档Flashback Data Archive (Oracle Total Recall)的真正强大之处、11gR2增强以及合理使用

    oracle的闪回很早就出来了,准确的说一直以来应该都较少被真正用户广为使用,除了dba和极少部分开发人员偶尔用于逻辑出错.误删恢复之外,较少被用于产生更有价值的用途. 各种闪回表flashback ...

  3. phpstorm激活大全--持续更新(支持2018最新版)

    方法一. 通过Licence Server 激活PHPStorm(快速) 方法原理是通过搭建服务器激活,不过网上有许多搭建好的. http://idea.goxz.gq http://v2mc.net ...

  4. Linux普通用户不能使用TAB键、上下键

    出发点 今天安装使用kail linux的时候发现tab键命令不能补全, 结合ubuntu, 因默认ubuntu创建的普通帐号,默认shell为/bin/sh,而这不支持tab等键的,所以将「指定用户 ...

  5. 2018年湘潭大学程序设计竞赛G又见斐波那契

    链接:https://www.nowcoder.com/acm/contest/105/G来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536 ...

  6. Django使用多数据库

    有些项目可能涉及到使用多个数据库的情况,方法很简单. 1.在settings中设定DATABASE 比如要使用两个数据库: DATABASES = { 'default': { 'NAME': 'ap ...

  7. C# 尝试读取或写入受保护的内存。这通常指示其他内存已损坏

    用管理员身份运行CMD,输入netsh winsock reset并回车(注意,必须是已管理员身份运行,这个重置LSP连接)运行后提示要重启生效,结果没重启就OK了(重启不重启看最终效果).

  8. UML(统一建模语言)是通用的可视化标准建模语言。由构造块、公共机制、构架三部分组成。

    UML UML(统一建模语言)是通用的可视化标准建模语言.由构造块.公共机制.构架三部分组成. 1.构造块:包括基本的UML建模元素(类.接口.用例等).关系(关联关系.依赖关系.泛化关系.实现关系) ...

  9. linux基础之网络基础配置

    基础命令:ifconfig/route/netstat,ip/ss,nmcli 一.ifconfig/route/netstat相关命令 1.  ifconfig - configure a netw ...

  10. Hadoop【单机安装-测试程序WordCount】

    Hadoop程序说明,就是创建一个文本文件,然后统计这个文本文件中单词出现过多少次! (MapReduce 运行在本地   启动JVM ) 第一步    创建需要的文件目录,然后进入该文件中进行编辑 ...