nuxt.js写项目时增加错误提示页面操作


Posted in Javascript onNovember 05, 2020

为项目增加错误提示页面,比如后端接口没有数据或接口报错的时候,如果不增加错误提示页面的话,那接口报错的信息就会在页面中显示,这显然不利于用户体验。

实际操作过程中,可能因为各种原因无法显示正确的返回页面,比如本身这篇文章的id不存在,或者网络请求问题,这时候就需要一个错误展示页用来提示用户;

nuxt.js官方也有错误提示页面的写法:传送门-> 官方错误提示页面的写法

此项目中的错误提示页面是放在layouts目录中:

nuxt.js写项目时增加错误提示页面操作

layouts中的error.vue页面内容为:

<template>
<div class="err_wrap">
<h1 class="error" v-if="error.statusCode === 404">页面不存在或没有数据</h1>
<h1 class="error" v-else>应用发生错误异常</h1>
<nuxt-link class="to_home" to="/">返回首页</nuxt-link>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'detail',
data() {
return {
msg: '未找到相应页面或没有数据'
}
}
}
</script>
<style scoped>
.err_wrap {
padding: 0.2rem 0.4rem;
text-align: center;
}
.error {
font-size: 0.32rem;
text-align: center;
padding-top: 55%;
color: #582c1a;
padding-bottom: 0.4rem;
}
.to_home {
font-size: 0.3rem;
color: #582c1a;
display: inline-block;
padding-bottom: 3.9rem;
}
</style>

在页面组件中是在asyncData的catch中写的,当接口调用出错或无数据时就会跳转到错误提示页面:

async asyncData(context, callback) {
 try {
  // console.log("_id的id:====", context.params.id)
 
  let paramsWorksList = {
  id: context.params.id
  }
  let WorksDetail = await context.$axios.post(`/anchor/worksList`, paramsWorksList)
  // console.log("WorksDetail:=====", WorksDetail.data.data[0])
 
  return {
  WorksDetail: WorksDetail.data.data[0]
  }
 } catch (err) {
  console.log("errConsole========:", err)
  callback({ statusCode: 404, message: '页面未找到或没有数据!' }) //当接口无数据或接口出错时会执行这句代码跳转到错误提示页面
 }
 },

这里有一个坑,asyncData的callback在nuxt.js的2.3.X版本给废弃了,运行项目总是提示:

Callback-based asyncData, fetch or middleware calls are deprecated. Please switch to promises or async/await syntax

经过google发现的,nuxt.js的作者觉得callback没什么用,给去掉了。

github issue链接:https://github.com/nuxt/nuxt.js/issues/4158

所以经过查看文档,error的属性在context这个参数中,页面组件中的代码如下:

async asyncData(context) {
 try {
  // console.log("_id的id:====", context.params.id)
 
  let paramsWorksList = {
  id: context.params.id
  }
  let WorksDetail = await context.$axios.post(`/anchor/worksList`, paramsWorksList)
  // console.log("WorksDetail:=====", WorksDetail.data.data[0])
 
  return {
  WorksDetail: WorksDetail.data.data[0]
  }
 } catch (error) {
  console.log("errConsole========:", context.error({ statusCode: 404, message: '页面未找到或无数据' }))
  context.error({ statusCode: 404, message: '页面未找到或无数据' }) //修改成这样就可以跳到错误提示页面
 }
 },

在 asyncData 请求时添加参数 callback,如果请求正确,则 callback 的第一个参数为 null,第二个参数为赋值对象;

如果请求错误,则直接将对象为参数,包括 statusCode 错误代码以及 message 错误信息,以便处理不同的错误信息展示;

最终效果如下:

nuxt.js写项目时增加错误提示页面操作

补充知识:Nuxt的错误页面和个性meta设置

当用户输入路由错误的时候,我们需要给他一个明确的指引,所以说在 应用程序开发中404页面时必不可少的。Nuxt.js支持直接再默认布局文件夹里建立错误页面。

建立错误页面

在根目录下的layouts文件夹下建立一个error.vue文件,它相当于一个显示应用错误的组件。

<template>
 <div class="error">
  <h2 v-if="error.statusCode == 404">404 - 页面不存在</h2>
  <h2 v-else>500 - 服务器错误</h2> 
  <ul> 
   <!-- 这里用来提示返回到主页 -->
   <li><nuxt-link to="/">HOME</nuxt-link></li> 
  </ul>
 </div>
</template>
<script>
export default {
 props: ['error']
}
</script>

nuxt.js写项目时增加错误提示页面操作

nuxt.js写项目时增加错误提示页面操作

代码用v-if进行判断错误类型,需要注意的是这个错误时你需要在<script>里进行声明的。

个性meta设置

页面的Meta对于SEO的设置非常重要,比如你现在要做个新闻页面,那为了搜索搜索引擎对新闻的收录,需要每个页面对新闻都有不同的title和meta设置。直接使用head方法来设置当前页面的头部信息就可以了。

我们现在要把New-1这个页面设置成个性的meta和title。

1.我们先把pages/news/index.vue页面的链接进行修改一下,传入一个title,目的是为了在新闻具体页面进行接收title,形成文章的标题。

/pages/news/index.vue

<template>
 <div>
  <h2>News Index page</h2>
  <p>NewID:{{$route.params.newsId}}</p>
  <ul>
   <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
   <li><nuxt-link :to="{name:'news-id',params:{id:123,title:'我是新闻标题'}}">News-1</nuxt-link></li>
  </ul>
 </div>
</template>
 
<script>
export default {
 
}
</script>

第一步完成后,我们修改/pages/news/_id.vue,让它根据传递值变成独特的meta和title标签。

<template>
 <div>
  <h2>News-Content [{{$route.params.id}}]</h2>
  <ul>
  <li><a href="/" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>
<script>
export default {
 validate ({ params }) {
 // Must be a number
 return /^\d+$/.test(params.id)
 },
 data(){
 return{
  title:this.$route.params.title,
 }
 },
//独立设置head信息
 head(){
  return{
  title:this.title,
  meta:[
   {hid:'description',name:'news',content:'This is news page'}
  ]
  }
 }
}
</script>

注意:为了避免组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象,建议利用hid键为meta标签配一个唯一的标识编号。

nuxt.js写项目时增加错误提示页面操作

以上这篇nuxt.js写项目时增加错误提示页面操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 操作css实现代码
Jun 11 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 #Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 #Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 #Javascript
nuxt引入组件和公共样式的操作
Nov 05 #Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 #jQuery
nuxt 实现在其它js文件中使用store的方式
Nov 05 #Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 #Javascript
You might like
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
Django中URL的参数传递的实现
2019/08/04 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
python自动生成证件号的方法示例
2021/01/14 Python
携程英文网站:Trip.com
2017/02/07 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
会计电算化个人自我评价
2013/11/17 职场文书
办公室内勤工作职责
2013/12/11 职场文书
优秀党员主要事迹
2014/01/19 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
六一亲子活动感想
2015/08/07 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server