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

Nuxt3-学习之路 04， 路由-静态路由

引言

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

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

路由

首先 Nuxt3 会默认使用根目录下的 pages 文件夹作为 路由

那么自然 pages/index.vue 根路由，也就是页面中的 /

然后我们创建好 pages 目录及 index.vue 文件，写好内容，启动项目。

此时会发现，路由是根路由，但是我们的页面上并没有任何数据。

此时就需要一个 组件名为 <NuxtPage />，将其放置在 app.vue 中，即可显示

静态路由

上面既然说了路由，那么肯定有子路由，这里介绍静态子路由的一个显示

静态子路由 也是需要在页面 pages 下进行创建，然后显示。

不同的是，子路由的 params 是根据 文件夹名 和 文件名字 来对应的。

由于是根据 文件夹名和文件名，所以我们注意文件名，我没有驼峰命名。

如果我们此时直接访问地址 http://localhost:3000/children1，会看到页面出现404。

不要慌，此时需要我们重启项目后，才能看到我们路由。

此时就完成了我们的静态路由的一个实现。

静态目录结构为：

-| pages/
---| my-children/
-----| children2.vue
---| index.vue

我们总不能通过url的访问方式来跳转吧，这里就要引入另一个组件 <NuxtLink to=""></NuxtLink>。

可以让我们直接进行点击来进行跳转。

总结

这节我们学习到，如何使用 路由 和使用 静态路由 的方式。

两个组件 <NuxtPage /> 及 <NuxtLink to=""></NuxtLink>