Vue中设置404错误页面【钢镚核恒】

Vue错误页面

简介

错误页面：为了让用户在访问不到的情况下，有更好的体验和反馈
这里提供了使用步骤，上路！
有404、401组件模板，大家可以修改使用，或者自己动手造个更好的咯

上路

创建错误页面组件（模板在下面）
导入错误图片（可以放到assets/images/error/下面）

添加到路由

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)const routes = [{path: '/404',component: (resolve) => require(['@/views/error/404'], resolve),hidden: true},{path: '/401',component: (resolve) => require(['@/views/error/401'], resolve),hidden: true},
]export default new Router({// mode: 'hash',mode: 'history',scrollBehavior: () => ({ y: 0 }),routes
})

错误组件模板

401组件

<template><div class="errPage-container"><el-button icon="arrow-left" class="pan-back-btn" @click="back">返回</el-button><el-row><el-col :span="12"><h1 class="text-jumbo text-ginormous">Oops!</h1><h2>你没有权限去该页面</h2><h6>如有不满请联系你领导</h6><ul class="list-unstyled"><li>或者你可以去:</li><li class="link-type"><router-link to="/dashboard">回首页</router-link></li></ul></el-col><el-col :span="12"><img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream."></el-col></el-row></div>
</template><script>
import errGif from '@/assets/images/error/401.gif'export default {name: 'Page401',data() {return {errGif: errGif + '?' + +new Date()}},methods: {back() {if (this.$route.query.noGoBack) {this.$router.push({ path: '/dashboard' })} else {this.$router.go(-1)}}}
}
</script><style lang="scss" scoped>.errPage-container {width: 800px;max-width: 100%;margin: 100px auto;.pan-back-btn {background: #008489;color: #fff;border: none!important;}.pan-gif {margin: 0 auto;display: block;}.pan-img {display: block;margin: 0 auto;width: 100%;}.text-jumbo {font-size: 60px;font-weight: 700;color: #484848;}.list-unstyled {font-size: 14px;li {padding-bottom: 5px;}a {color: #008489;text-decoration: none;&:hover {text-decoration: underline;}}}}
</style>

404

<template><div class="wscn-http404-container"><div class="wscn-http404"><div class="pic-404"><img class="pic-404__parent" src="@/assets/images/error/404.png" alt="404"><img class="pic-404__child left" src="@/assets/images/error/404_cloud.png" alt="404"><img class="pic-404__child mid" src="@/assets/images/error/404_cloud.png" alt="404"><img class="pic-404__child right" src="@/assets/images/error/404_cloud.png" alt="404"></div><div class="bullshit"><div class="bullshit__oops">OOPS!</div><div class="bullshit__headline">{{ message }}</div><div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div><a href="/" class="bullshit__return-home">返回首页</a></div></div></div>
</template><script>export default {name: 'Page404',computed: {message() {return '网管说这个页面你不能进......'}}
}
</script><style rel="stylesheet/scss" lang="scss" scoped>
.wscn-http404-container{transform: translate(-50%,-50%);position: absolute;top: 40%;left: 50%;
}
.wscn-http404 {position: relative;width: 1200px;padding: 0 50px;overflow: hidden;.pic-404 {position: relative;float: left;width: 600px;overflow: hidden;&__parent {width: 100%;}&__child {position: absolute;&.left {width: 80px;top: 17px;left: 220px;opacity: 0;animation-name: cloudLeft;animation-duration: 2s;animation-timing-function: linear;animation-fill-mode: forwards;animation-delay: 1s;}&.mid {width: 46px;top: 10px;left: 420px;opacity: 0;animation-name: cloudMid;animation-duration: 2s;animation-timing-function: linear;animation-fill-mode: forwards;animation-delay: 1.2s;}&.right {width: 62px;top: 100px;left: 500px;opacity: 0;animation-name: cloudRight;animation-duration: 2s;animation-timing-function: linear;animation-fill-mode: forwards;animation-delay: 1s;}@keyframes cloudLeft {0% {top: 17px;left: 220px;opacity: 0;}20% {top: 33px;left: 188px;opacity: 1;}80% {top: 81px;left: 92px;opacity: 1;}100% {top: 97px;left: 60px;opacity: 0;}}@keyframes cloudMid {0% {top: 10px;left: 420px;opacity: 0;}20% {top: 40px;left: 360px;opacity: 1;}70% {top: 130px;left: 180px;opacity: 1;}100% {top: 160px;left: 120px;opacity: 0;}}@keyframes cloudRight {0% {top: 100px;left: 500px;opacity: 0;}20% {top: 120px;left: 460px;opacity: 1;}80% {top: 180px;left: 340px;opacity: 1;}100% {top: 200px;left: 300px;opacity: 0;}}}}.bullshit {position: relative;float: left;width: 300px;padding: 30px 0;overflow: hidden;&__oops {font-size: 32px;font-weight: bold;line-height: 40px;color: #1482f0;opacity: 0;margin-bottom: 20px;animation-name: slideUp;animation-duration: 0.5s;animation-fill-mode: forwards;}&__headline {font-size: 20px;line-height: 24px;color: #222;font-weight: bold;opacity: 0;margin-bottom: 10px;animation-name: slideUp;animation-duration: 0.5s;animation-delay: 0.1s;animation-fill-mode: forwards;}&__info {font-size: 13px;line-height: 21px;color: grey;opacity: 0;margin-bottom: 30px;animation-name: slideUp;animation-duration: 0.5s;animation-delay: 0.2s;animation-fill-mode: forwards;}&__return-home {display: block;float: left;width: 110px;height: 36px;background: #1482f0;border-radius: 100px;text-align: center;color: #ffffff;opacity: 0;font-size: 14px;line-height: 36px;cursor: pointer;animation-name: slideUp;animation-duration: 0.5s;animation-delay: 0.3s;animation-fill-mode: forwards;}@keyframes slideUp {0% {transform: translateY(60px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}}}
}
</style>

Vue中设置404错误页面【钢镚核恒】相关推荐

iis7.5 php 404.17,win2008 r2中IIS7.5及以上设置404错误页面的正确方法
1.进入windows 2008服务器,打开IIS Manager,点击需要设置404错误页面的网站.进入windows 2008服务器,打开IIS Manager,点击需要设置404错误页面的网站. ...
win服务器访问显示404,win2008 r2中IIS7.5及以上设置404错误页面的正确方法
1.进入windows 2008服务器,打开IIS Manager,点击需要设置404错误页面的网站.进入windows 2008服务器,打开IIS Manager,点击需要设置404错误页面的网站. ...
在Wicket中配置404错误页面
始终建议为" 404页面未找到"错误自定义一个不错的错误页面. 本指南向您展示如何在Wicket中配置404错误页面. 1.错误页面为Wicket创建错误页面和类. packag ...
服务器如何设置404错误页面
(网站打不开或者出现死链接的时候都需要有一个美观的404页面,这样才能减少网站的调试率.) - 01 什么是自定义404错误页面? 404自定义错误页面就是当用户输入了错误的url地址或者输入了一个不 ...
织梦网站如何设置404错误页面？
首先在网上搜索织梦系统404错误页面的一个网页或者也可以自己编辑,然后在通过网页编辑器编辑一下这个404网页,然后把里面的网址改为自己的网址,佐言用的是 Macromedia Dreamweaver ...
Spring MVC【钢镚核恒】
Spring MVC 简介 Spring MVC是Spring体系的轻量级Web MVC框架 Spring MVC的核心Controller控制器,用于处理请求,产生响应 Spring MVC基于Sp ...
Vue中使用SVG图标的步骤【钢镚核恒】
Vue中使用SVG图标的步骤简介 svg 可缩放矢量图形(Scalable Vector Graphics) svg 优势:任意缩放,超强显示效果,较小文件,可压缩 svgo 用来压缩svg中无用信 ...
Vue 初始化样式之 normalize.css【钢镚核恒】
Vue 初始化样式之 normalize.css 简介 normalize.css 的作用是初始化样式,例如: * {margin: 0;padding: 0;border: 0; } 在vue中使用 ...
Spring 【钢镚核恒】
Spring 简介 Spring框架是企业开发复杂性的一站式解决方案 Spring框架的核心是loC容器与AOP面向切面编程 Spring loC负责创建与管理系统对象,并在此基础上扩展功能使用导 ...

Vue中设置404错误页面【钢镚核恒】

Vue错误页面

简介

上路

错误组件模板

401组件

404

Vue中设置404错误页面【钢镚核恒】相关推荐

最新文章

热门文章