Nuxt3---嵌套路由

1. 建立嵌套路由的文件夹（约定大于配置）
2. 创建和文件夹相同名称的文件（父页面）
3. 在新建文件夹下任意创建子页面

一、页面目录结构

在pages文件夹下创建父页面parent.vue，并创建同名文件夹parent，子页面在文件夹中建立

二、子页面

<template>
    <h1>这是子组件页面1</h1>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>

<template>
    <h1>这是子组件页面2</h1>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>

三、父页面

<template>
    <div class="">
        <NuxtLink to="/parent/child">child1</NuxtLink>
        <NuxtLink to="/parent/childTwo">child2</NuxtLink>
        <h1>这里是 父组件页面</h1>
    </div>
    <!-- 子页面的出口-->
    <NuxtPage></NuxtPage>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>

四、入口文件app.vue

<template>
  <div>
    <!-- <hello-world /> -->
    <NuxtLink to="/parent">嵌套路由页面</NuxtLink>
    <NuxtPage></NuxtPage>
    <!-- <NuxtLink to="/parent/child">/parent/child</NuxtLink><br /> -->
  </div>
</template>

五、效果展示

六、一些报错

网上父页面中要加一个加一个用于显示子页面，但是我用了会报错并且无法展示子页面

[Vue warn]: Failed to resolve component: NuxtChild 19:59:46
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Component <Anonymous> is missing template or render function.

将换成后才好用