一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

Nuxt3-学习之路 06， 路由-嵌套路由

引言

本系列会以我的一个理解，来介绍并开始学习 Nuxt3。

中间会插入自己所联系到的 乱七八糟 的 知识点。

路由

上一节，我们讲了 动态路由 通过文件夹或文件名中带有*[]* 方括号的一个形式来体现。

在上面说的 静态路由 也好，动态路由 也罢，都是直接跳转到某个路由下，那么如何如何一个路由里面 嵌套 另一个路由呢？下面讲解下 嵌套路由

嵌套路由

我们先看一下，嵌套路由 的一个目录结构写法。

是一个 文件夹名为 parent 下面有个 child.vue 当然也可以是其他的 child2.vue，名字都是任意的。

但是还需要跟 parent 文件夹同级目录下同名的一个名为 parent.vue 文件。

这样的一个模式就是 嵌套路由

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

上面的一个目录结构，会生成一个文件树为：

[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

• 注意 父页面 parent 的 path 是有 / 斜杠的
• 而 子页面 child 的 path 是没有 / 斜杠的

我们编写下 parent.vue 和 child.vue 这两个文件的代码

注意想要显示 child.vue 里面的内容，需要在 parent.vue 页面中添加组件名为 <NuxtChild />才可以显示。注意写完后，需要重启项目，不然是404

这里是有一个疑问的，官网的一个显示是通过使用 <NuxtPage /> 这个组件。

当然两个我都测了，都可以进行使用。但是为了区分一下，我这里还是使用了 <NuxtChild />

最后通过 进行跳转，发现是可以成功到达，parent 页面和它的 child 子页面。

注意

如果想要 parent 下面，来一个默认的子页面，那么需要创建一个文件名为 index.vue 的文件。

注意这里需要 重启项目 后，我们就可以得到路由 parent 下的默认子页面。

根据目录结构生成的文件树为：

[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    children: [
      {
        path: '',
        component: '~/pages/parent/index.vue',
        name: 'parent'
      },
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

总结

学习了 嵌套路由 的结构以及使用 和 知道 嵌套路由 生成的一个文件树的结果，以及默认子路由页面的展示。