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中的內(nèi)容也顯示不了。

文件目錄

在這里插入圖片描述

代碼

app.vue中的代碼

<template>
  <div>
  	<!-- 顯示pages中index.vue的內(nèi)容 -->
    <NuxtPage></NuxtPage>
  </div>
</template>

index.vue中的代碼

<template>
    <div>
    	<!-- 路由跳轉(zhuǎn)到parent下面的child -->
        <NuxtLink to="/parent/child">跳轉(zhuǎn)</NuxtLink>
    </div>
</template>

parent.vue中的代碼

<template>
    <div>
        這是父組件內(nèi)容
        <NuxtChild></NuxtChild>
    </div>
</template>

child.vue中的代碼

<template>
    <div>這是子組件內(nèi)容</div>
</template>

解決方案

把parent.vue中的<NuxtChild></NuxtChild>改成<NuxtPage></NuxtPage>就可以正常顯示了，改完后控制臺不報錯了，child.vue子組件的內(nèi)容也能正常顯示了

在這里插入圖片描述

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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關(guān)閉Eslint語法檢查的多種方式(保證有效)
eslint是一個JavaScript的校驗插件,通常用來校驗語法或代碼的書寫風格,下面這篇文章主要給大家介紹了關(guān)于Vscode關(guān)閉Eslint語法檢查的多種方式,文章通過圖文介紹的非常詳細,需要的朋友可以參考下
2022-07-07
VueJs組件之父子通訊的方式
這篇文章主要介紹了VueJs組件之父子通訊的方式，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-05-05
Vue中mixin和extends的使用方法詳解
當我們談?wù)揤ue的組件擴展時,經(jīng)常會遇到mixin和extends這兩個關(guān)鍵詞,它們提供了一種有效的方式來共享和重用組件邏輯,本文將深入探討Vue中mixin和extends的使用方法,并詳細探討它們的覆蓋邏輯,以便你在實際項目中能夠更好地應用它們
2023-08-08
Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹結(jié)構(gòu)的實現(xiàn)
本文主要介紹了Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹結(jié)構(gòu)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-05-05
Vue獲取當前系統(tǒng)日期(年月日)的示例代碼
發(fā)中會有要獲取當前日期的需求,有的是獲取到當前月份,有的是精確到分秒,在 Vue 開發(fā)中,獲取當前時間是一項常見的需求,本文將深入探討Vue獲取當前系統(tǒng)日期(年月日),幫助您更好地利用當前時間,需要的朋友可以參考下
2024-01-01
vue實現(xiàn)文章內(nèi)容過長點擊閱讀全文功能的實例
下面小編就為大家分享一篇vue實現(xiàn)文章內(nèi)容過長點擊閱讀全文功能的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12