7

#Nuxt.js 错误页示例

 2 years ago
source link: https://xmanyou.com/nuxt-js-error-page-example/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
26 October 2021 / Nuxt.js

#Nuxt.js 错误页示例

Nuxt.js提供了一个很有趣的方式来实现错误页：使用layout组件来替代page组件创建错误页。

详细步骤：

  • 1). 在layouts目录下创建一个error.vue文件
  • 2). error.vue参考代码：
<template>
  <div>
    <h1 v-if="error.statusCode === 404">啊呀，页面找不到了呢</h1>
    <h1 v-else>天啦撸，粗错啦！</h1>
    <h2>错误码: {{error.statusCode}}</h2>
    <h2>错误消息: {{error.message}}</h2> 

    <NuxtLink to="/">返回首页</NuxtLink>
  </div>
</template>

<script>
  export default {
    layout: 'error', // you can set a custom layout for the error page
    props: {
      error:{
        type: Object,
        required: true
      }
    },
  }
</script>
  • 3). 错误截图
    nuxt.js-error-page-example

参考：https://nuxtjs.org/docs/concepts/views/#error-page

阿斌

Read more posts by this author.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK