掌握了动态路由后，我们还需要对嵌套路由有所了解。嵌套路由就是路由是两级，但是程序员的页面是一个。也就是说有父级页面，也有子集页面。类似我们的页面嵌套。
如何建立一个嵌套路由
嵌套路由的建立非常容易，用一句话解释为：目录和文件名同名，就制作了一个嵌套路由。
制作一个嵌套路由页面一般需要三步：
- 建立嵌套路由的文件夹（约定大于配置）
- 创建和文件夹相同名称的文件（父页面）
- 在新建文件夹下任意创建子页面
|--pages |----parent/ |------child.vue |----parent.vue
先在pages目录下，新建一个文件夹 parent ，然后在 pages 目录下再建立一个parent.vue的文件。文件建立好之后，编写代码。
<template>
<div >Parent Page</div>
<!-- 子页面的出口-->
<NuxtChild></NuxtChild>
</template>
<script setup>
import {} from "vue";
</script>
<style scoped></style>
这里的<NuxtChild>就是嵌套路由的出口，所以如果是嵌套路由，就必须要加上这个标签。这是 Nuxt 的一个内置组件。 有了父页面之后，在新建的parent文件夹下，再建立一个 child.vue子页面。然后编写代码。
<template>
<div >Child Page</div>
</template>
<script setup>
import {} from "vue";
</script>
<style scoped></style>
然后为了看到效果，我们还需要一个路由链接过来。直接到index.uve增加路由链接。
<NuxtLink to="/parent/child">/parent/child</NuxtLink><br />
做完这部，我们就可以到浏览器预览一下效果了。
多个子页面的制作
这时候小伙伴可能会有疑问了，如果我有多个子页面要如何作那？方法其实和制作一个单页面是相同的。在
pagesparent文件夹下面再新建一个文件 two.vue。然后编写代码。
<template>
<div >Two Page</div>
</template>
<script setup>
import {} from "vue";
</script>
<style scoped></style>
写完后再到index.vue页面，增加导航路由。
<NuxtLink to="/parent/two">/parent/two</NuxtLink><br />
然后去浏览器查看结果。
结语
以上就是本节关于路由中的嵌套路由知识，其实看似我们学的是路由，但是我们在学路由的同时，也把对应的页面的创建也学完了。再次和小伙伴们说一下，一定要动手练习，不练习你永远都学不会的。别看现在的我们学的都很简单，以后上实战的时候，就会多出很多内容来了。