Nuxt 提供基于文件的路由来在 Web 应用程序中创建路由。
Nuxt路由初始看起来很简单-只需在~/pages
目录中创建Vue文件,文件路由系统将自动生成页面。然而,随着您深入研究,Nuxt路由变得更加复杂和有趣!
- 索引路由:索引路由由
~/pages
目录中的index.vue
文件表示。 - 静态路由:静态路由是直接映射到单个文件的简单路由。它们非常适用于不需要从API或数据库获取任何数据的页面。
- 动态路由:动态路由允许您匹配URL中的动态片段,并将它们作为参数传递给页面组件。它们在文件名中用一对方括号和参数名称定义,例如
[slug].vue。
- Catch-All路由:捕获所有路由用于匹配其他路由未匹配的任何URL。它们通过在文件名中使用三个点并用一对方括号括起来来定义,即[…slug].vue。
- 嵌套路由:嵌套路由允许您通过将其组织成嵌套目录来创建路由的层次结构。在Nuxt中,路由之间的父子关系由具有相同名称的文件和目录来表示。
Nuxt 3引入了一项新功能,允许在单个页面上灵活混合使用不同的渲染方法。这是通过实现路由规则来实现的,可以在Nuxt配置设置中指定。
基本上,这个功能赋予开发者灵活性,可以根据情况定义每个页面应该如何渲染,无论是服务器端、静态地还是通过客户端渲染。路由规则的添加增强了对渲染过程的控制,根据每个页面的具体需求,实现了内容的定制化交付和显示。
下面提供的图表概述了可用的路由类型和新的路由规则,说明了它们的交互方式以及如何在Nuxt 3应用程序中应用它们以优化性能和用户体验。
Nuxt中的路由中间件是一个强大的功能,它允许您在渲染页面或一组页面(路由)之前执行代码。此功能与Nuxt的路由系统紧密集成,提供了一种机制来执行诸如身份验证检查、数据预取或根据特定条件有条件地重定向用户等任务,以在路由完全解析并渲染其组件之前执行。 :::highlight-text --- text: 中间件可以全局应用或应用于单个页面。 --- :::
Nuxt提供了一个内置的实用函数集合,用于与路由中间件一起使用。这些实用工具是Nuxt丰富生态系统的一部分,旨在简化任务,包括导航、布局操作甚至在构建时设置路由中间件等。
下面的图表说明了Nuxt提供的一些关键实用功能,特别适用于在路由中间件中使用,以及何时(运行时或构建时)以及何处使用它们。
最后,Nuxt 3还配备了一系列必备的Vue组件,这些组件从一开始就可以立即使用。这些组件会自动导入,并且在Nuxt页面上准备好了可以使用。
自定义路由
https://nuxt.com/docs/guide/going-further/custom-routing
在 Nuxt 3 中,路由由页面目录内的文件结构定义。然而,由于它在底层使用了 vue-router,Nuxt 为您提供了多种在项目中添加自定义路由的方法。
\