我是 NuxtJs 的新手。我想测试 nuxt-link 是如何工作的,所以我故意将 nuxt-link 放到一个不起作用的路由上,希望被重定向到默认的 404 页面。我将这一行放在 pages/index.vue
文件中:
<nuxt-link to='/asksdkjd'>ssss</nuxt-link>
它在 chrome 中显示为 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 中尝试过,但同样的问题正在发生。希望你们能帮忙。提前致谢。
最佳答案
定义错误页面。
创建这个文件:layouts/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 文档
关于javascript - NuxtJs : ReferenceError: NuxtError is not defined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63846716/