Javascript is required
【转载】Nuxt Routes

Nuxt 提供基于文件的路由来在 Web 应用程序中创建路由。

Nuxt路由初始看起来很简单-只需在~/pages目录中创建Vue文件,文件路由系统将自动生成页面。然而,随着您深入研究,Nuxt路由变得更加复杂和有趣!

  1. 索引路由:索引路由由~/pages目录中的index.vue文件表示。
  2. 静态路由:静态路由是直接映射到单个文件的简单路由。它们非常适用于不需要从API或数据库获取任何数据的页面。
  3. 动态路由:动态路由允许您匹配URL中的动态片段,并将它们作为参数传递给页面组件。它们在文件名中用一对方括号和参数名称定义,例如[slug].vue。
  4. Catch-All路由:捕获所有路由用于匹配其他路由未匹配的任何URL。它们通过在文件名中使用三个点并用一对方括号括起来来定义,即[…slug].vue。
  5. 嵌套路由:嵌套路由允许您通过将其组织成嵌套目录来创建路由的层次结构。在Nuxt中,路由之间的父子关系由具有相同名称的文件和目录来表示。

Nuxt 3引入了一项新功能,允许在单个页面上灵活混合使用不同的渲染方法。这是通过实现路由规则来实现的,可以在Nuxt配置设置中指定。

基本上,这个功能赋予开发者灵活性,可以根据情况定义每个页面应该如何渲染,无论是服务器端、静态地还是通过客户端渲染。路由规则的添加增强了对渲染过程的控制,根据每个页面的具体需求,实现了内容的定制化交付和显示。

下面提供的图表概述了可用的路由类型和新的路由规则,说明了它们的交互方式以及如何在Nuxt 3应用程序中应用它们以优化性能和用户体验。

Nuxt中的路由中间件是一个强大的功能,它允许您在渲染页面或一组页面(路由)之前执行代码。此功能与Nuxt的路由系统紧密集成,提供了一种机制来执行诸如身份验证检查、数据预取或根据特定条件有条件地重定向用户等任务,以在路由完全解析并渲染其组件之前执行。==中间件可以全局应用或应用于单个页面。==

Nuxt提供了一个内置的实用函数集合,用于与路由中间件一起使用。这些实用工具是Nuxt丰富生态系统的一部分,旨在简化任务,包括导航、布局操作甚至在构建时设置路由中间件等。

下面的图表说明了Nuxt提供的一些关键实用功能,特别适用于在路由中间件中使用,以及何时(运行时或构建时)以及何处使用它们。

最后,Nuxt 3还配备了一系列必备的Vue组件,这些组件从一开始就可以立即使用。这些组件会自动导入,并且在Nuxt页面上准备好了可以使用。

自定义路由

https://nuxt.com/docs/guide/going-further/custom-routing

在 Nuxt 3 中,路由由页面目录内的文件结构定义。然而,由于它在底层使用了 vue-router,Nuxt 为您提供了多种在项目中添加自定义路由的方法。