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

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

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

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

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

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的错误页面和个性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>

代码用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写项目时增加错误提示页面操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 解决nuxt 自定义全局方法,全局属性,全局变量的问题

    注意 ,这个 在 asyncData 还是不能用的 ,在mounted等其他生命周期里面可以, asyncData 里因为获取不到this他在组件初始化前执行的,如果找到方法我会继续更新到下一篇博客 好现在说步骤,在plugins 文件夹里新增一个 commom.js名字你自己取 commom.js 测试代码 import Vue from 'vue' var comsys= { install(Vue){ Vue.prototype.comsys = { val:function(val){

  • 基于Vue.js+Nuxt开发自定义弹出层组件

    今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示: 一款融合了Vant.NutUI等热门Vue组件库中的Popup弹层.Dialog对话框.Toast提示框.ActionSheet动作面板框.Notify通知框等功能. 快速使用 在main.js中引入组件 // 引入弹窗Popup import Popup from './components/popup' Vue.use(Popup) 支持如下两种 组件式 及 函数式 调用插件. 组件式 <templat

  • nuxt 实现在其它js文件中使用store的方式

    前言 在新建的js文件中想用store里面的数据,比如token想在封装的axios里面,请求头里面去使用,亦或者通过app的JS接口获取token并存储在store里面. 我们都知道如何在vue中如何使用. 代码 /* * @Description: * @Author: lxc * @Date: 2019-07-02 16:14:07 * @LastEditTime: 2019-08-14 16:08:19 * @LastEditors: lxc */ // 导出 store 的地方 imp

  • nuxt引入组件和公共样式的操作

    1,引入组件 在components目录创建组件,在页面中引入组件 例如引入公共导航栏 创建组件components/Nav.vue 引入组件layouts/default.vue 2,引入公共样式 assets/css/common.css 在nuxt.config.js中引入 若引入less或者sass: 补充知识:在nuxt项目中使用component组件 编写组件页面 1.在components下新建一个新建组件页面,如下所示 2.新建完成之后初始页面的代码如下所示: 3.下面从elem

  • Nuxt pages下不同的页面对应layout下的页面布局操作

    有时候我们pages中不同的页面需要不同的个性化布局这时候layout就起作用了 layouts 根目录下的所有文件都属于个性化布局文件,可以在页面组件中利用 layout 属性来引用. pages文件下组件的layout属性值为layout文件下的所对应的布局组件的名称 请确保在布局文件里面增加 <nuxt/> 组件用于显示页面非布局内容. 举个例子 1.layouts/custom_layout.vue: <template> <div> <div class

  • nuxt 自定义 auth 中间件实现令牌的持久化操作

    核心点就是在process.server下,把之前存在 cookie 中的数据再用store.commit一下 auth.js /* eslint-disable no-unused-vars */ /* eslint-disable no-useless-return */ export const TokenKey = 'Admin-token' /** * 解析服务端拿到的cookie * @param {*} cookie * @param {*} key */ export funct

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

    为项目增加错误提示页面,比如后端接口没有数据或接口报错的时候,如果不增加错误提示页面的话,那接口报错的信息就会在页面中显示,这显然不利于用户体验. 实际操作过程中,可能因为各种原因无法显示正确的返回页面,比如本身这篇文章的id不存在,或者网络请求问题,这时候就需要一个错误展示页用来提示用户: nuxt.js官方也有错误提示页面的写法:传送门-> 官方错误提示页面的写法 此项目中的错误提示页面是放在layouts目录中: layouts中的error.vue页面内容为: <template>

  • 连接ACCESS数据库时发生错误提示:找不到可安装的 ISAM

    连接ACCESS数据库时发生错误提示:找不到可安装的 ISAM 检查后发现原来是把Data Source写成 DataSource了 错误:<add key="OleConnection" value="Provider=Microsoft.Jet.OleDb.4.0;DataSource=Demo.mdb;" /> 正确:<add key="OleConnection" value="Provider=Microso

  • springboot 自定义404、500错误提示页面的实现

    目录 springboot 默认的异常处理机制 使用模板引擎 使用示例 没有使用模板引擎 springboot 默认的异常处理机制 springboot 默认已经提供了一套处理异常的机制.一旦程序中出现了异常 springboot 会向 /error 的 url 发送请求.在 springboot 中提供了一个名为 BasicErrorController 的类来处理 /error 请求,然后跳转到默认显示异常的页面来展示异常信息 使用模板引擎 在使用 thymeleaf 等模板引擎时,spri

  • 在Python的Django框架中编写错误提示页面

    你应该在生产环境中把TEMPLATE_DEBUGFalse 如果这个设为`` True`` ,为了在那个好看的错误页面上显示足够的东西,Django的模版系统就会为每一个模版保存一些额外的信息. 实现一个404模板 如果`` DEBUG`` 设置为`` True`` ,Django会显示那个自带的404错误页面. 但如果`` DEBUG`` 被设置成`` False`` ,那它的行为就不一样了: 他会显示一个在你的模版根目录中名字叫`` 404.html`` 的模版 所以,当你准备部署你的应用时

  • Nuxt.js实现一个SSR的前端博客的示例代码

    为什么要用Nuxt.js 公司现有的项目只有落地页是通过前端本身server读取pug文件进行服务端渲染的,当然是为了首屏加载速度以及SEO.Nuxt.js 是一个基于Vue.js的通用应用框架,预设了利用Vue.js开发服务端渲染的应用所需要的各种配置,只需要安装官方文档的要求进行开发,就可以很好的解决SSR的问题.我们以一个简单的博客为例,来实践一下Nuxt.js. 项目介绍 当前基于Nuxt.js的简化版博客,包括注册.登录.文章列表页面.文章详情页.以及用户列表页等几个页面,用户信息使用

  • 详解Nuxt.js中使用Element-UI填坑

    Nuxt.js是Vue进行SSR的一个优选开源项目,可免去繁琐的Webpack.nodejs后台服务配置等操作,方便的搭建一个支持SSR的VUE项目.Element-UI则是一个机遇Vue2.0+开发的一套UI框架,实现了常用的组件,可帮助开发者快速搭建一个如CMS系统.后台管理系统等基于Vue的系统. 由于Element-UI目前在SSR支持方面还是不够完善,且Nuxt.js在文档方面也有欠缺,所以在Nuxt.js中使用Element-UI也是一段坑路,需要去将查看Nuxt源码与Element

  • IDEA创建maven项目时在tomcat运行浏览器404的问题

    在使用IDEA构建maven入门项目进行学习时遇到了一个不解的错误,特此记录以下 完整的项目结构应该如下: 但是在tomcat运行项目时遇到index.jsp页面404的情况,很懵但是项目创建步骤并没错,tomcat运行也良好. 原因是自己生成的maven的artifacts路径不对,导致找不到项目(网上有老哥说是IDEA是默认使用自带的tomcat配置,而我们一般用自己的tomcat配置). 解决办法: 首先打开File->Project Structure: 点击artifacts,如果没有

  • vue 项目中当访问路由不存在的时候默认访问404页面操作

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在最后添加一个path: * ,优先级从上到下查找路由,都没有的时候全部指向 404页面 ,代码如下: const baseRoute = [ { path: '/login', name: 'login', component: Login }, {path: '/', redirect: '/in

  • 基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)

    nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架,使用nuxt.js在做同构项目开发时,需要考虑的一些点总结如下: 一.node服务端性能优化(提高node应用程序处理高流量的能力) 基于nuxt.js的服务端渲染项目我们能做的服务端性能优化有以下几点(需要注意的是持久化缓存不应该在本地开发环境去做,这样在缓存期间不会暴露本地开发中代码的问题) 优化点 参考文档及思路 优化场景/条件 特别说明 检测方法 1. 页面缓存 vue官方文档 页面内容不是用户特定(即对于相同的 URL,总

  • Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开箱即用,还支持自定义正则表达式.而且支持 40 多种语言,对本地化.多语言支持非常友好. 国内饿了么团队开源项目 Element UI 就用到了 vee-validate . vee-validate 官网:https://baianat.github.io/vee-validate/ 1. 安装

随机推荐