05. Nuxt3 嵌套路由的使用

掌握了动态路由后，我们还需要对嵌套路由有所了解。嵌套路由就是路由是两级，但是程序员的页面是一个。也就是说有父级页面，也有子集页面。类似我们的页面嵌套。

如何建立一个嵌套路由

嵌套路由的建立非常容易，用一句话解释为：目录和文件名同名，就制作了一个嵌套路由。
制作一个嵌套路由页面一般需要三步：

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

|--pages
|----parent/
|------child.vue
|----parent.vue

先在\pages目录下，新建一个文件夹 parent ，然后在 pages 目录下再建立一个parent.vue的文件。文件建立好之后，编写代码。

<template>
  <div class="">Parent Page</div>
  <!-- 子页面的出口-->
  <NuxtChild></NuxtChild>
</template>

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

<style scoped></style>

这里的<NuxtChild>就是嵌套路由的出口，所以如果是嵌套路由，就必须要加上这个标签。这是 Nuxt 的一个内置组件。 有了父页面之后，在新建的parent文件夹下，再建立一个 child.vue子页面。然后编写代码。

<template>
  <div class="">Child Page</div>
</template>

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

<style scoped></style>

然后为了看到效果，我们还需要一个路由链接过来。直接到index.uve增加路由链接。

<NuxtLink to="/parent/child">/parent/child</NuxtLink><br />

做完这部，我们就可以到浏览器预览一下效果了。

多个子页面的制作

这时候小伙伴可能会有疑问了，如果我有多个子页面要如何作那？方法其实和制作一个单页面是相同的。在
\pages\parent\文件夹下面再新建一个文件 two.vue。然后编写代码。

<template>
  <div class="">Two Page</div>
</template>

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

<style scoped></style>

写完后再到index.vue页面，增加导航路由。

<NuxtLink to="/parent/two">/parent/two</NuxtLink><br />

然后去浏览器查看结果。

结语

以上就是本节关于路由中的嵌套路由知识，其实看似我们学的是路由，但是我们在学路由的同时，也把对应的页面的创建也学完了。再次和小伙伴们说一下，一定要动手练习，不练习你永远都学不会的。别看现在的我们学的都很简单，以后上实战的时候，就会多出很多内容来了。

以上关于05. Nuxt3 嵌套路由的使用的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。