路由
Nuxt 文件系统路由为 pages/ 目录中的每个文件创建一个路由。
Nuxt 的一个核心特性是文件系统路由器。 pages/ 目录中的每个 Vue 文件都会创建一个对应的 URL（或路由），该 URL 会显示该文件的内容。通过为每个页面使用动态导入，Nuxt 利用代码分割来为请求的路由提供最少量的 JavaScript。
页面
Nuxt 路由基于 vue-router，并根据 pages/ 目录中创建的每个组件的文件名生成路由。
此文件系统路由使用命名约定来创建动态和嵌套路由
-| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue
导航
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>
路由参数
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>
路由中间件
export default defineNuxtRouteMiddleware((to, from) => {
// isAuthenticated() is an example method verifying if a user is authenticated
if (isAuthenticated() === false) {
return navigateTo('/login')
}
})
路由验证
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>