Taolin · 【转载】Nuxt Routes

原文
https://blog.nuxtdojo.com/p/4-nuxt-routes-rundown

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

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

动态路由：动态路由允许您匹配URL中的动态片段，并将它们作为参数传递给页面组件。它们在文件名中用一对方括号和参数名称定义，例如[slug].vue。

Catch-All路由：捕获所有路由用于匹配其他路由未匹配的任何URL。它们通过在文件名中使用三个点并用一对方括号括起来来定义，即[…slug].vue。

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

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

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

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

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

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

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

自定义路由

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