【Nuxt3系列六】路由

官方教程

基于文件路径生成的路由，是Nuxt的一个重要的核心功能。

它基于vue-router

假设pages文件树如下：

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

Nuxt会根据这些文件路径和文件名，生成以下的路由

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

导航

<NuxtLink>组件可以导航到其它页面，它会被渲染成为一个<a>标签。程序水合之后，点击这个标签会更新浏览器URL，然后通过JavaScript进行页面转换。

当<NuxtLink>进入了客户端的窗口的时候，Nuxt会自动的提取链接，提前加载页面。实现更加快速的导航

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

路由参数

useRoute()函数，可以在<script setup>或者是setup()中使用并获取当前的路由详情

<script setup lang="ts">
const route = useRoute()

// When accessing /posts/1, route.params.id will be 1
console.log(route.params.id)
</script>

路由中间件

Nuxt提供了一套可以定制的路由中间件框架。可以在整个应用程序中使用，非常适合在导航到特定的路由之前，运行一些代码。例如在进入index页面之前，进行鉴权，鉴权不通过就跳到login页面。

Nuxt有三种不同的中间件

1. 匿名（或内联）路由中间件，需要在页面中定义使用
2. 具名路由中间件，放在middleware/目录下。挡在页面中使用的时候，会进行异步自动加载。路由名的规范是kebab-case。即驼峰命名的someMiddleware.vue，会变成some-middleware
3. 全局路由，和具名路由差不多，但是文件名是有个global后缀的。他将会在每个路由跳转的时候都进行运行

假设认证一个路由如下

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

使用如下

<script setup lang="ts">
definePageMeta({
  middleware: 'auth'
})
</script>

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

路由验证

你可以通过定义definePageMeta()的validate属性来提供验证。 就例如一个页面需要接受id参数，如果这个id参数不符合格式，就不进行渲染。return false放回一个404参数。也可以使用statusCode/statusMessage去返回一个自定义的对象

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