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子组件的内容也能正常显示了

总结

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