05. Nuxt3 嵌套路由的使用

目录
文章目录隐藏
  1. 如何建立一个嵌套路由
  2. 多个子页面的制作
  3. 结语

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

如何建立一个嵌套路由

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

  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 />

然后去浏览器查看结果。

结语

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 05. Nuxt3 嵌套路由的使用

发表回复