Nuxt3路由配置

Nuxt一个核心的功能，就是基于文件的路由。放在pages/目录中的每一个.vue文件，都有一个与之对应的的路由（可以理解为URL)被自动创建。并且，Nuxt利用代码分割技术，动态地加载每个路由特定的文件，从而尽可能地减少用户访问时加载不必要的JS文件。

Pages(页面)

Nuxt实际上是将pages/目录下的文件，根据其文件名创建了基于vue-router的路由配置。

比如以下文件结构：

pages/
--| about.vue
--| posts/
----| [id].vue

将会生成这样的路由配置：

{
  "routes": [
    {
      "path": "/about",
      "component": "pages/about.vue"
    },
    {
      "path": "/posts/:id",
      "component": "pages/posts/[id].vue"
    }
  ]
}

在Nuxt项目中，使用<NuxtLink>组件替代<a>标签来做跳转，能够避免整个页在的刷新，而且能实现页面跳转的过渡动画。

当<NuxtLink>包含的内容在客户端的视图中出现时，Nuxt将自动获取对应的组件或预生成页面（generated pages)的内容，这样，用户点击该链接时就能更快地跳转到目标页面。

<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>

比如以上代码，当你在网页上看到About/Post 1/Post 2文字的时候，浏览器就开始加载这三个页面的代码了。

Route Parameters(路由参数)

在setup代码块中，使用useRoute()可以获取到路由的详细信息。

<script setup>
const route = useRoute()

// 访问 /posts/1 时, route.params.id 的值为 1
console.log(route.params.id)
</script>

Route Middleware(路由中间件)

在跳转到另一个页面之前需要处理的业务逻辑代码，很适合抽离出来单独放在一个路由中间件文件中。Nuxt应用，非常友好地支持以下三种路由中间件：

匿名路由中间件(Anonymous route middleware)，直接在页面中定义和使用
具名路由中间件（Named route middleware)，放在middleware/目录中。当其在页面中使用时，该文件会被自动地、异步地导入。这类中间件只会在被引用的页面被访问时调用。
全局路由中间件，也放在middleware/目中，只是其名称必须包含.global后缀。应用中只要出现路由跳转，都会调用此类中间件。

以下是一件认证类的中间件，用来保护/dashboard页面：

middleware/auth.ts

export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() is an example method verifying if a user is authenticated
  if (isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

pages/dashboard.vue

<script setup>
definePageMeta({
  middleware: 'auth'
})
</script>

<template>
  <h1>Welcome to your dashboard</h1>
</template>

Route Validation(路由检验)

校验路由的有效性，有两种方法。复杂的校验，可以使用路由中间件。简单的，则可以在definePageMeta中使用validate属性来实现。

validate属性以route为参数。返回true时表示路由有效。返回false而且没有其他路由被正确匹配时，会引起404错误（显示404页面）。你也可以让其返回一个对象，包含statusCode或者statusMessage，这样就能直接返回错误页面，也不再检查是否有其他路由可以匹配到。

pages/posts/[id].vue

<script setup>
definePageMeta({
  validate: async (route) => {
    // 检查路由中的id是否是由纯数字组成
    return /^\d+$/.test(route.params.id)
  }
})
</script>

Pages(页面)

Navigation(跳转)

Route Parameters(路由参数)

Route Middleware(路由中间件)

Route Validation(路由检验)