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.
運(yùn)行的時候控制臺報錯，子組件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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue router路由嵌套不顯示的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問題2017-06-06
webpack4+Vue搭建自己的Vue-cli項(xiàng)目過程分享
這篇文章主要介紹了webpack4+Vue搭建自己的Vue-cli，對于vue-cli的強(qiáng)大,使用過的人都知道,極大的幫助我們降低了vue的入門門檻,感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
這篇文章主要介紹了vue+elementUI的表格最后一行合計自定義顯示方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
本文主要介紹了前后端分離項(xiàng)目中的跨域問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12
Vscode關(guān)閉Eslint語法檢查的多種方式(保證有效)
eslint是一個JavaScript的校驗(yàn)插件,通常用來校驗(yàn)語法或代碼的書寫風(fēng)格,下面這篇文章主要給大家介紹了關(guān)于Vscode關(guān)閉Eslint語法檢查的多種方式,文章通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了VueJs組件之父子通訊的方式，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
當(dāng)我們談?wù)揤ue的組件擴(kuò)展時,經(jīng)常會遇到mixin和extends這兩個關(guān)鍵詞,它們提供了一種有效的方式來共享和重用組件邏輯,本文將深入探討Vue中mixin和extends的使用方法,并詳細(xì)探討它們的覆蓋邏輯,以便你在實(shí)際項(xiàng)目中能夠更好地應(yīng)用它們2023-08-08
Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹結(jié)構(gòu)的實(shí)現(xiàn)
本文主要介紹了Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹結(jié)構(gòu)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Vue獲取當(dāng)前系統(tǒng)日期(年月日)的示例代碼
發(fā)中會有要獲取當(dāng)前日期的需求,有的是獲取到當(dāng)前月份,有的是精確到分秒,在 Vue 開發(fā)中,獲取當(dāng)前時間是一項(xiàng)常見的需求,本文將深入探討Vue獲取當(dāng)前系統(tǒng)日期(年月日),幫助您更好地利用當(dāng)前時間,需要的朋友可以參考下2024-01-01
vue實(shí)現(xiàn)文章內(nèi)容過長點(diǎn)擊閱讀全文功能的實(shí)例
下面小編就為大家分享一篇vue實(shí)現(xiàn)文章內(nèi)容過長點(diǎn)擊閱讀全文功能的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12