Question

Nuxt 提供了基于文件的路由机制，使用 Vue Router 技术来创建 Web 应用程序中的路由。

这种路由机制可以通过在项目中创建具有特定命名约定的文件来定义路由。

例如，在 pages 目录下创建一个名为 about.vue 的文件，将会自动创建一个路由，可以通过访问 /about 地址来访问该路由。

Nuxt 会自动根据文件名创建相应的路由，并将这些路由集成到 Vue Router 中。

这种基于文件的路由机制可以帮助开发人员更快地创建和维护路由，同时也可以提高应用程序的可读性和可维护性。

这个目录是可选的，这意味着如果你只使用 app.vue （除非你在 nuxt.config 中设置 pages: true 或者有一个 app/router.options.ts ），减少你的 应用程序的包大小。

使用方法

页面是 Vue 组件，可以具有 Nuxt 支持的任何 有效扩展名 （默认为 .vue 、 .js 、 .jsx 、 .mjs 、 .ts 或 .tsx ）。

Nuxt 会自动为你的 ~/pages/ 目录中的每个页面创建一个路由。

pages/index.vue

<template>
  <h1>Index page</h1>
</template>

pages/index.ts

// https://vuejs.org/guide/extras/render-function.html
export default defineComponent({
  render () {
    return h('h1', 'Index page')
  }
})

pages/index.tsx

// https://nuxt.com/docs/examples/advanced/jsx
// https://vuejs.org/guide/extras/render-function.html#jsx-tsx
export default defineComponent({
  render () {
    return <h1>Index page</h1>
  }
})

pages/index.vue 文件将映射到应用程序的 / 路由。

如果您使用的是 app.vue ，请确保使用 <NuxtPage/> 组件来显示当前页面：

app.vue

<template>
  <div>
    <!-- 跨所有页面共享的组件，例如：NavBar -->
    <NuxtPage />
  </div>
</template>

Nuxt 要求每个页面必须只有一个根元素，以便在不同页面之间进行路由切换时能够成功地进行过渡效果。这是因为在服务端渲染或静态生成时，Nuxt 可以正确地渲染该页面的内容。

但是当在客户端进行导航时，如果页面有多个根元素，那么路由之间的切换过渡效果将会失败，导致该路由页面不能正常渲染。

举例来说，以下是一个只有一个根元素的页面示例：

pages/working.vue

<template>
  <div>
    <!-- 此页面正确地只有一个根元素 -->
    Page content
  </div>
</template>

pages/bad-1.vue

<template>
  <!-- 由于这条注释的存在，在客户端导航期间路由更改时不会呈现此页面 -->
  <div>Page content</div>
</template>

pages/bad-2.vue

<template>
  <div>本页</div>
  <div>有多个根元素</div>
  <div>并且在客户端导航期间路由更改时不会呈现</div>
</template>

动态路由

如果您将任何内容放在方括号内，它将变成一个 动态路由 参数。

您可以在一个文件名或目录中混合和匹配多个参数，甚至是非动态文本。

如果您希望参数是 可选，则必须将其括在双方括号中 - 例如， ~/pages/[[slug]]/index.vue 或 ~/pages/[[slug]].vue 将同时匹配 / 和 /test 。

示例

如果你需要创建一个捕获所有路由的路由规则，可以创建一个文件并将其命名为 ...slug.vue。

这个文件将匹配该路径下的所有路由，无论这些路由是多少层级的嵌套。

...slug 语法表示一个动态路由参数，可以匹配任意数量的 URL 片段，而且这个参数的值将作为组件的 props 传递给该组件。

使用这个语法可以方便地处理动态路由，例如处理博客文章页面的路由，或者处理类似于 /products/12345 这样的商品详情页的路由。

pages/[...slug].vue

<template>
  <p>{{ $route.params.slug }}</p>
</template>

导航到 /hello/world 将呈现：

<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 组件，您必须将 <NuxtPage> 组件插入到 pages/parent.vue 中：

pages/parent.vue

<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtPage :foobar="123" />
  </div>
</template>

子路由键

您可能想要为应用程序中的每个路由定义元数据。 您可以使用 definePageMeta 宏来执行此操作，该宏将在 <script> 和 <script setup> 中工作：

vue

<script setup>
definePageMeta({
  title: 'My home page'
})
</script>

然后可以通过 route.meta 对象在应用程序的其余部分访问此数据。

vue

<script setup>
const route = useRoute()

console.log(route.meta.title) // My home page
</script>

如果您使用嵌套路由，所有这些路由的页面元数据将合并到一个对象中。 有关路由元的更多信息，请参阅 vue-router 文档 。

与 defineEmits 或 defineProps 类似（参见 Vue 文档 ）， definePageMeta 是一个编译器宏。

它将被编译掉，因此你不能在组件内部引用它。相反，传递给它的元数据将被提升到组件外部。因此，页面元数据对象不能引用组件本身（或组件上定义的值）。但是，它可以引用导入的绑定。

vue

<script setup>
import { someData } from '~/utils/example'

const title = ref('')

definePageMeta({
  title,  // 这会产生一个错误
  someData
})
</script>

特殊元数据

要在应用的页面之间导航，您应该使用 <NuxtLink> 组件。

该组件包含在 Nuxt 中，因此您不必像导入其他组件那样导入它。

指向 pages 文件夹中的 index.vue 页面的简单链接：

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

详细了解 <NuxtLink> 用法。

编程式导航

Nuxt 3 允许通过 navigateTo() 实用程序方法进行编程导航。 使用此实用程序方法，您将能够以编程方式在您的应用程序中导航用户。

这对于从用户那里获取输入并在整个应用程序中动态导航它们非常有用。

在此示例中，我们有一个名为 navigate() 的简单方法，该方法在用户提交搜索表单时被调用。

注意： 确保始终在 navigateTo 上进行 await 或通过从函数返回来链接其结果。

<script setup>
const name = ref('');
const type = ref(1);

function navigate(){
  return navigateTo({
    path: '/search',
    query: {
      name: name.value,
      type: type.value
    }
  })
}
</script>

自定义路由

随着您的应用变得越来越大和越来越复杂，您的路由可能需要更大的灵活性。 为此，Nuxt 直接暴露了 router、routes 和 router 选项，以不同的方式进行定制。

相关阅读：going-further > custom-routing