未定义NuxtError : NuxtJs: NuxtJs:NuxtJs

Question

我是NuxtJs的新手。我想测试nuxt-link是如何工作的，所以我故意将nuxt-link放在一个不起作用的路由上，希望被重定向到默认的404页面。我将下面这一行放入pages/index.vue文件：

<nuxt-link to='/asksdkjd'>ssss</nuxt-link>

并且它像this:一样以铬合金显示

单击链接后，我在控制台中看到以下错误：

ReferenceError: NuxtError is not defined
at Vue.errorChanged (App.js?efe7:173)
at Watcher.run (vue.runtime.esm.js?2b0e:4568)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)
at Array.eval (vue.runtime.esm.js?2b0e:1980)
at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

vue.runtime.esm.js?2b0e:619 [Vue warn]: You may have an infinite update loop in watcher with expression "nuxt.err"
(found in <Root>)

这是当我被重定向到链接时这个错误显示的error screenshot，因为您可以在url栏中看到无效链接。它不会呈现默认的404页面。但是当我点击刷新时，我可以看到404页面的(sceenshot)。

这是我在安装这个新项目时生成的nuxt.config.js文件(我省略了注释)。

export default {
  mode: 'universal',
  target: 'static',
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  css: [
  ],
  plugins: [
  ],
  components: true,
  buildModules: [
  ],
  modules: [
  ],
  build: {
  }
}

我已经用谷歌搜索这个错误很长一段时间了，但没有找到任何东西。我也尝试过firefox，但同样的问题也发生了。希望你们能帮上忙。提前谢谢。

Answer 1

定义你的错误页面。

创建此文件:layout/error.vue

<template>
  <div class="container">
    <div v-if="error.statusCode === 404">
      <h1>Page not found</h1>
      <p>{{ error.message }}</p>
    </div>
    <div v-else>
      <h1>An error occurred</h1>
    </div>
    <n-link to="/">Home page</n-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'default' // If you prefers you can set a custom layout for the error page
}
</script>

更多信息:查看有关error page的nuxt文档