使用 Vue & UI Pro 的仪表板模板

路由

Nuxt 文件系统路由为 pages/ 目录中的每个文件创建一个路由。

Nuxt 的核心功能之一是文件系统路由器。 pages/ 目录中的每个 Vue 文件都会创建一个相应的 URL(或路由),用于显示该文件的内容。 通过对每个页面使用动态导入,Nuxt 利用代码拆分来为请求的路由提供最少的 JavaScript 代码。

页面

Nuxt 路由基于 vue-router,并根据每个在 pages/ directory 中创建的组件的文件名生成路由。

此文件系统路由使用命名约定来创建动态和嵌套路由。

| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue
文档 > 指南 > 目录结构 > 页面 中了解更多信息。

The <NuxtLink> 组件在页面之间链接。它渲染一个 <a> 标签,其 href 属性设置为页面的路由。一旦应用程序被水合,页面转换将通过更新浏览器 URL 在 JavaScript 中执行。这可以防止完整页面刷新,并允许动画转换。

当一个 <NuxtLink> 在客户端进入视窗时,Nuxt 将自动预取链接页面的组件和有效负载(生成的页面),从而实现更快的导航。

pages/app.vue
<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>
文档 > API > 组件 > Nuxt 链接 中了解更多信息。

路由参数

The useRoute() 可组合函数可以在 <script setup> 块或 Vue 组件的 setup() 方法中使用,以访问当前路由详细信息。

pages/posts/[id].vue
<script setup lang="ts">
const 
route
=
useRoute
()
// When accessing /posts/1, route.params.id will be 1
console
.
log
(
route
.
params
.
id
)
</script>
文档 > API > 可组合函数 > 使用路由 中了解更多信息。

路由中间件

Nuxt 提供了一个可自定义的路由中间件框架,您可以在整个应用程序中使用它,非常适合提取您希望在导航到特定路由之前运行的代码。

路由中间件在 Nuxt 应用程序的 Vue 部分运行。尽管名称相似,但它们与在应用程序的 Nitro 服务器部分运行的服务器中间件完全不同。

有三种类型的路由中间件

  1. 匿名(或内联)路由中间件,直接在使用它们的页面中定义。
  2. 命名路由中间件,放置在 middleware/ 目录中,并在页面上使用时通过异步导入自动加载。(注意:路由中间件名称被规范化为 kebab-case,因此 someMiddleware 变成 some-middleware。)
  3. 全局路由中间件,放置在 middleware/ 目录(带有 .global 后缀)中,并在每次路由更改时自动运行。

一个 auth 中间件保护 /dashboard 页面的示例

export default 
defineNuxtRouteMiddleware
((
to
,
from
) => {
// isAuthenticated() is an example method verifying if a user is authenticated if (
isAuthenticated
() === false) {
return
navigateTo
('/login')
} })
文档 > 指南 > 目录结构 > 中间件 中了解更多信息。

路由验证

Nuxt 通过 validate 属性在 definePageMeta() 中提供路由验证,您希望验证的每个页面都包含该属性。

The validate 属性接受 route 作为参数。您可以返回一个布尔值来确定这是否是一个有效的路由,可以与该页面一起渲染。如果您返回 false,并且找不到其他匹配项,这将导致 404 错误。您也可以直接返回一个包含 statusCode/statusMessage 的对象,以立即响应错误(不会检查其他匹配项)。

如果您有更复杂的用例,则可以使用匿名路由中间件。

pages/posts/[id].vue
<script setup lang="ts">
definePageMeta
({
validate
: async (
route
) => {
// Check if the id is made up of digits return typeof
route
.
params
.
id
=== 'string' && /^\d+$/.
test
(
route
.
params
.
id
)
} }) </script>
文档 > API > 工具 > 定义页面元数据 中了解更多信息。