Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决

更新时间：2023年06月30日 08:51:03 作者：Dreams゜

这篇文章主要介绍了Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

问题报错

[Vue warn]: Failed to resolve component: NuxtChild If this is a native
custom element, make sure to exclude it from component resolution via
compilerOptions.isCustomElement.

在这里插入图片描述

运行的时候控制台报错，子组件child.vue中的内容也显示不了。

文件目录

在这里插入图片描述

代码

app.vue中的代码

<template>
  <div>
  	<!-- 显示pages中index.vue的内容 -->
    <NuxtPage></NuxtPage>
  </div>
</template>

index.vue中的代码

<template>
    <div>
    	<!-- 路由跳转到parent下面的child -->
        <NuxtLink to="/parent/child">跳转</NuxtLink>
    </div>
</template>

parent.vue中的代码

<template>
    <div>
        这是父组件内容
        <NuxtChild></NuxtChild>
    </div>
</template>

child.vue中的代码

<template>
    <div>这是子组件内容</div>
</template>

解决方案

把parent.vue中的<NuxtChild></NuxtChild>改成<NuxtPage></NuxtPage>就可以正常显示了，改完后控制台不报错了，child.vue子组件的内容也能正常显示了

在这里插入图片描述

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue router路由嵌套不显示问题的解决方法
这篇文章主要为大家详细介绍了vue router路由嵌套不显示的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下vue-router 路由嵌套不显示问题
2017-06-06
webpack4+Vue搭建自己的Vue-cli项目过程分享
这篇文章主要介绍了webpack4+Vue搭建自己的Vue-cli，对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛,感兴趣的朋友跟随脚本之家小编一起看看吧
2018-08-08
vue+elementUI的表格最后一行合计自定义显示方式
这篇文章主要介绍了vue+elementUI的表格最后一行合计自定义显示方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
vue解决跨域问题的方法
本文主要介绍了前后端分离项目中的跨域问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-12-12
Vscode关闭Eslint语法检查的多种方式(保证有效)
eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格,下面这篇文章主要给大家介绍了关于Vscode关闭Eslint语法检查的多种方式,文章通过图文介绍的非常详细,需要的朋友可以参考下
2022-07-07
VueJs组件之父子通讯的方式
这篇文章主要介绍了VueJs组件之父子通讯的方式，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-05-05
Vue中mixin和extends的使用方法详解
当我们谈论Vue的组件扩展时,经常会遇到mixin和extends这两个关键词,它们提供了一种有效的方式来共享和重用组件逻辑,本文将深入探讨Vue中mixin和extends的使用方法,并详细探讨它们的覆盖逻辑,以便你在实际项目中能够更好地应用它们
2023-08-08
Vue将将后端返回的list数据转化为树结构的实现
本文主要介绍了Vue将将后端返回的list数据转化为树结构的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
Vue获取当前系统日期(年月日)的示例代码
发中会有要获取当前日期的需求,有的是获取到当前月份,有的是精确到分秒,在 Vue 开发中,获取当前时间是一项常见的需求,本文将深入探讨Vue获取当前系统日期(年月日),帮助您更好地利用当前时间,需要的朋友可以参考下
2024-01-01
vue实现文章内容过长点击阅读全文功能的实例
下面小编就为大家分享一篇vue实现文章内容过长点击阅读全文功能的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12