Nuxt.js - 最新自定义报错、缺省、404、500 定制化 error.vue（页面、接口报错时自动跳转到该自定义页面）支持自定义文案、状态码等功能

2024-05-31 14:21:25

前言

在开发 Nuxt.js 时，当页面出错或接口后台数据返回异常时，页面就会 “直接呈现” 报错的信息。

正常情况下，当页面 404、500 或页面报错时，

前端应该 自动跳转到错误页，而不是直接白屏或显示报错信息。

本文将从 0-1 带您完成一个 error.vue 错误页，承载各种各样的 “错误类型”，

支持接口报错自动触发与自定义手动触发，给用户一个较为良好的体验：

第一步

如果您已经创建过该文件夹（使用过布局模板），可略过创建文件夹这一步。

打开项目根目录，创建 layouts 文件夹（注意不要拼错，否则无效），

在里面再建立一个 error.vue 文件，复制以下代码：

<!--跟普通页面一样，自定义想要的错误页面即可主要是依靠props中的error对象数据进行判断与自定义下面就是给您个示例，照猫画虎即可。
-->

Nuxt.js - 最新自定义报错、缺省、404、500 定制化 error.vue（页面、接口报错时自动跳转到该自定义页面）支持自定义文案、状态码等功能相关推荐

vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
SIP应答消息状态码与功能
SIP应答消息状态码与功能类型状态码状态说明临时应答(1XX) 100 Trying 正在处理中 180 Ringing 振铃 181 call being forwarder 呼叫正在前向 ...
Http 请求常见状态码报错（200/404/500）
为了更好地了解各个状态码代表的意思,做了一个总结,在实际的工作中,主要涉及到的还是200,404,500等. 1. http状态码分为五大类: 2. 100-199 信息性质状态码 1XX的状态码不常 ...
html底部自动加载下一页,js页面滚动到底部时自动加载下一页数据
一段滚动到页面底部自动加载更多数据的js代码,需要jquery.js . jquey.tmpl.js 支持 var Data = { PageCount: 1, PageSize: 30, IsCom ...
Nuxt.js 中定制 error.vue 错误缺省页
一.介绍在Nuxt.js项目中,当接口报错或后台数据返回异常时,前端展示就会呈现接口报错的信息,这会给用户非常不好的体验.所以当出现404.500等应用错误时,我们可以在项目的根目录下创建layou ...
js日历控件，值得收藏，完美支持自定义
My97日期控件一个非常好用的日期控件,功能非常优秀,绝对是你一直想要的日期控件. 演示地址: http://www.my97.net/dp/demo/ 下载1: http://www.cnblog ...
NUXT 入门第一课：关于 Nuxt.js
关于 Nuxt.js 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了 Next.js,一个 React 的服务端渲染应用框架.几小时后,与 Next.js 异曲同工,一个基于 ...
关于 Nuxt.js
关于 Nuxt.js 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了 Next.js,一个 React 的服务端渲染应用框架.几小时后,与 Next.js 异曲同工,一个基于 ...
imchat视频聊天室 linux,基于Nuxt+Vant聊天模板|nuxt.js仿微信界面|红包|朋友圈
项目说明 > [NuxtIMChat项目]是基于vue.js+nuxt.js+vuex+webpack+vant-ui开发的仿微信聊天实例.实现了消息发送.图片/视频预览.下拉刷新/长按弹窗.朋 ...

最新文章

热门文章