简言
记录下nux3pages目录文件的使用方法。
pages
pages目录是存放项目页面文件的地方，Nuxt 3提供基于文件的路由功能，可在网络应用程序中创建路由。
pages/ 目录中的每个页面文件都代表不同的路由，显示其内容。
建议将其他的业务组件vue文件存放到其他目录，pages只存放路由相关的页面vue文件。
文件路由规则
页面是 Vue 组件，可以使用 Nuxt 支持的任何有效扩展名（默认为 .vue、.js、.jsx、.mjs、.ts 或 .tsx）。
自动导入
Nuxt 会自动为 ~/pages/ 目录中的每个页面创建路由。
例如：
<template><div><!-- This page correctly has only one single root element -->Page content</div>
</template>// https://vuejs.org/guide/extras/render-function.html
export default defineComponent({render () {return h('h1', 'Index page')}
})nuxt会生成两个路由。
如果你的pages/下的文件返回的不是vue组件实例，也会生成一个文件同名路由，这个路由可以访问，默认显示 NuxtLayout 设置的layout布局文件内容。
子路由
可以使用 <NuxtPage> 显示嵌套路由。
pages/index.vue 文件将映射到应用程序的 / 路由。
如果使用 app.vue，请确保使用 <NuxtPage/> 组件来显示当前页面：
<template><div><!-- Markup shared across all pages, ex: NavBar --><NuxtPage /></div>
</template>嵌套子路由显示也和app.vue的相似。
例如，创建parent.vue文件，再创建同名parent目录，那么parent目录下文件生成的路由就是parent的子路由 /parent/*
-| pages/
---| parent/
------| child.vue
---| parent.vue该文件树将生成这些路由：
[{path: '/parent',component: '~/pages/parent.vue',name: 'parent',children: [{path: 'child',component: '~/pages/parent/child.vue',name: 'parent-child'}]}
]显示子路由child.vue 组件，必须在 pages/parent.vue 中插入 <NuxtPage> 组件：
<template><div><h1>I am the parent view</h1><NuxtPage :foobar="123" /></div>
</template>NuxtPage组件有个page-key属性可以设置当前显示子路由值
动态路由
如果在方括号内放置任何内容，都会变成动态路由参数。您可以在文件名或目录中混合和匹配多个参数，甚至是非动态文本。
例如：
-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue路由可以匹配/users-*/*,例如：users-admin/123。
在上面的示例中，您可以通过 $route 对象访问组件中的参数：
<template><p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>全路由
如果需要一个总括路由，可以使用一个名为 […slug].vue 的文件来创建。这将匹配该路径下的所有路由。
<template><p>{{ $route.params.slug }}</p>
</template>导航到 /hello/world 会出现这样的结果：
<p>["hello", "world"]</p>可以当作404路由
路由元数据
有的时候我们想往路由上定义元数据。可以在页面内使用 definePageMeta 宏来实现这一目的，该宏在 <script> 和 <script setup> 中均有效。
<script setup lang="ts">
definePageMeta({title: 'My home page'
})
</script>这些数据可以在应用程序的其他部分通过 route.meta 对象访问。
<script setup lang="ts">
const route = useRoute()console.log(route.meta.title) // My home page
</script>特殊元数据
你可以自己定义自己的元数据,但使用 definePageMeta 定义的某些元数据有其特殊用途：
- alias — 路由别名。您可以定义页面别名。它们允许你从不同的路径访问同一个页面。页面别名可以是字符串，也可以是字符串数组，如 vue-router 文档中所定义。
- keepalive — 如果您在 definePageMeta 中设置 keepalive: true，Nuxt 将自动用 Vue <KeepAlive> 组件包装您的页面。
- key — 页面路由key值。
- layout — 您可以定义用于渲染路由的布局。可以是 false（禁用任何布局）、字符串或 ref/computed（如果你想以某种方式使其具有反应性）。
- layoutTransition and pageTransition — 布局过渡效果和页面过渡效果。
- middleware — 页面路由中间件。您可以定义中间件，以便在加载此页面前应用。它将与任何匹配的父/子路由中使用的所有其他中间件合并。它可以是一个字符串、一个函数（遵循 global before guard 模式的匿名/内联中间件函数）或一个字符串/函数数组。
- name — 页面路由name.
- path — 路由path。如果您有比文件名更复杂的模式，可以定义路径匹配器。
类型声明
如果要为页面添加自定义元数据，您可能希望以类型安全的方式进行。我们可以增强 definePageMeta 所接受对象的类型：
在index.d.ts声明文件添加
declare module '#app' {interface PageMeta {pageType?: string}
}// It is always important to ensure you import/export something when augmenting a type
export {}路由跳转
vue页面模板上：
使用<NuxtLink> 组件，NuxtLink官网描述。
<template><NuxtLink to="/">Home page</NuxtLink>
</template>在js或ts上：
Nuxt 3 允许通过 navigateTo() 实用程序方法进行编程导航。
<script setup lang="ts">
const name = ref('');
const type = ref(1);function navigate(){return navigateTo({path: '/search',query: {name: name.value,type: type.value}})
}
</script>客户端专用页面
您可以通过给页面添加 .client.vue 后缀，将其定义为客户端页面。该页面的所有内容都不会在服务器上呈现。
服务器专用页面
您只需给页面添加 .server.vue 后缀，就能将其定义为服务器页面。虽然您可以使用 vue-router 控制的客户端导航功能导航到该页面，但该页面将自动使用服务器组件渲染，这意味着渲染页面所需的代码不会出现在您的客户端捆绑包（client-side bundle）中。
自定义路由
随着应用程序变得越来越大、越来越复杂，您的路由可能需要更大的灵活性。因此，Nuxt 直接公开了路由器、路由和路由器选项，以便以不同方式进行定制。
示例
在根目录创建app目录，再app，目录下创建router.options.ts扩展或覆盖路由。
/app/router.options.ts
import type { RouterConfig } from '@nuxt/schema';
export default <RouterConfig>{routes(_routes) {return [..._routes,{name: "A",path: '/a',component: () => import('~/components/a.vue'),},]},
}
若不想覆盖，记得把_routes返回。
多个页面目录
默认情况下，所有页面都应放在项目根目录下的一个页面目录中。
不过，您可以使用 Nuxt Layers 对应用程序的页面进行分组：
-| some-app/
---| nuxt.config.ts
---| pages
-----| app-page.vue
-| nuxt.config.ts// some-app/nuxt.config.ts
export default defineNuxtConfig({
})export default defineNuxtConfig({extends: ['./some-app'],
})extends的用法感觉有点像monorepo策略
结语
结束了。
