pages
Nuxt 提供了基于文件的路由功能，用于在你的 Web 应用中创建路由。
路由
规范
Nuxt 会自动为 ~/pages/ 目录中的每个页面创建一个路由
<template>
<h1>首页</h1>
</template>页面必须有一个单一的根元素，以允许页面之间的路由过渡，HTML 注释也被视为元素。
动态路由
如果你在方括号中放置任何内容，它将被转换为动态路由参数。你可以在文件名或目录中混合和匹配多个参数，甚至可以包含非动态文本。
如果是两个方括号,表示路径中可有可无. 举个例子
新建一个文件夹起名[[test]]下面新建一个文件testEdit.vue
访问的路径就有两个选择
INFO
1.http://localhost:3000/test/testEdit
2.因为是可选 http://localhost:3000/testEdit 去掉中间的 test 也可以
- 举例
(1) 目录结构
-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue在上面的示例中，你可以通过 $route 对象在组件中访问 group/id：
(2) ~/pages/users-[group]/[id].vue
<template>
<p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>导航到/users-admins/123将渲染:
<p>admins - 123</p>- Composition API 获取参数
<script setup lang="ts">
const route = useRoute();
if (route.params.group === "admins" && !route.params.id) {
console.log("警告！确保用户已经通过身份验证！");
}
</script>
命名的父级路由将优先于嵌套的动态路由。
对于 /foo/hello 路由，~/pages/foo.vue 将优先于 ~/pages/foo/[slug].vue。
使用 ~/pages/foo/index.vue 和 ~/pages/foo/[slug].vue 来匹配不同页面的 /foo 和 /foo/hello。全匹配路由
如果你需要一个全匹配路由，你可以创建一个名为 [...slug].vue 的文件。这将匹配该路径下的所有路由。
<!-- pages/[...slug].vue -->
<template>
<p>{{ $route.params.slug }}</p>
</template>导航到/hello/wrold将渲染
<p>["hello", "world"]</p>嵌套路由
你可以使用<NuxtPage>显示嵌套路由
- 举例
目录结构
-| 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>我是父视图</h1>
<NuxtPage :foobar="123" />
</div>
</template>页面元数据
你可能希望为应用程序中的每个路由定义元数据。你可以使用 definePageMeta 宏来实现，它在 <script> 和 <script setup> 中都可以使用：
<script setup lang="ts">
definePageMeta({
title: "我的主页",
});
</script>然后，你可以在应用程序的其他部分通过 route.meta 对象访问这些数据。
<script setup lang="ts">
const route = useRoute();
console.log(route.meta.title); // 我的主页
</script>特殊元数据
当然，你可以定义自己在整个应用程序中使用的元数据。但是，使用 definePageMeta 定义的某些元数据具有特定的目的：
alias
你可以定义页面别名。它们允许你从不同的路径访问相同的页面。它可以是一个字符串或字符串数组
keepalive
如果在 definePageMeta 中设置 keepalive: true，Nuxt 将自动将你的页面包装在 Vue 的 <KeepAlive> 组件中。这在具有动态子路由的父级路由中可能很有用，如果你希望在路由更改时保留页面状态。
layout
你可以定义用于渲染路由的布局。这可以是 false（禁用任何布局），字符串或 ref/computed，如果你希望以某种方式使其响应
layoutTransition和pageTransition路由动画
你可以为包装页面和布局的 <transition> 组件定义过渡属性，或者传递 false 以禁用该路由的 <transition> 包装器
middleware
你可以定义在加载此页面之前应用的中间件。它将与所有匹配的父/子路由中使用的其他中间件合并。它可以是一个字符串、一个函数（遵循全局前置守卫模式的匿名/内联中间件函数）或一个字符串/函数数组。
name
你可以为此页面的路由定义一个名称。
path
如果你的模式比文件名更复杂，你可以定义一个路径匹配器。
路由跳转
标签式跳转
<template>
<NuxtLink to="/">首页</NuxtLink>
</template>函数式跳转
使用 navigateTo 实用程序方法进行编程式导航。使用此实用程序方法，你将能够以编程方式引导用户在应用程序中导航。这对于从用户处获取输入并在应用程序中动态地引导他们非常有用
<script setup lang="ts">
const name = ref("");
const type = ref(1);
navigateTo({
path: "/search",
query: {
name: name.value,
type: type.value,
},
});
</script>