页面和布局 Pages and Layouts

Nuxt3迁移指南 - 页面和布局

app.vue

Nuxt 3 通过 ~/app.vue 为您的应用程序提供一个中央入口点。 如果你的源目录中没有 app.vue 文件，Nuxt 将使用它自己的默认版本。

此文件非常适合放置任何需要在您的应用程序启动时运行一次的自定义代码，以及您应用程序每个页面上出现的任何组件。 例如，如果您只有一个布局，则可以将其移至 app.vue。

阅读更多关于 app.vue 的信息。

迁移步骤

  1. 考虑创建一个 app.vue 文件，并包含任何需要在应用程序顶层运行一次的逻辑。 您可以查看此处的示例。

Layouts

如果您在应用程序中为多个页面使用布局，则只需稍作更改。

在 Nuxt 2 中，<Nuxt> 组件在布局中用于呈现当前页面。 在 Nuxt 3 中，布局使用插槽代替，因此您必须用 <slot /> 替换该组件。 这也允许具有命名和作用域插槽的高级用例。 阅读更多关于布局的信息。

您还需要使用“definePageMeta”编译器宏更改定义页面使用的布局的方式。 布局将采用烤肉串包装。 因此，当在您的页面中引用时，layouts/customLayout.vue 变成了 custom-layout。

迁移步骤

  1. 将 <Nuxt /> 替换为 <slot />
  2. 使用 definePageMeta 选择页面使用的布局。
  3. 将~/layouts/_error.vue 移动到~/error.vue。 请参阅 错误处理文档。

Example: ~/layouts/custom.vue

diff
layouts/custom.vue
diff
  <template>
    <div id="app-layout">
      <main>
-       <Nuxt />
+       <slot />
      </main>
    </div>
  </template>

Pages

Nuxt 3 附带一个可选的“vue-router”集成，由源目录中存在的“pages/”目录触发。 如果你只有一个页面，你可以考虑将它移动到 app.vue 以获得更轻的构建。

动态路由

Nuxt 3 中定义动态路由的格式与 Nuxt 2 略有不同，因此您可能需要重命名 pages/ 中的一些文件。

  1. 以前使用 _id 定义动态路由参数的地方现在使用 id 。
  2. 以前使用 _.vue 定义包罗万象的路由，现在使用 [...slug].vue。

嵌套路由

在 Nuxt 2 中，您将使用 <Nuxt> 和 <NuxtChild> 定义任何嵌套路由(带有父组件和子组件)。 在 Nuxt 3 中，这些已被替换为单个“”组件。

页面键和 Keep-alive 道具

如果您将自定义页面键或保持活动道具传递给 ，您现在将使用 definePageMeta 来设置这些选项。

请参阅有关迁移 Nuxt 组件挂钩的更多信息。

页面和布局转换

如果您直接在组件选项中定义页面或布局的过渡，您现在需要使用definePageMeta来设置过渡。 从 Vue 3 开始，-enter 和 -leave CSS 类已被重命名。 在<slot>上使用时，<Nuxt>中的style属性不再适用于转换，因此将样式移至-active类。

阅读更多关于pages/。

迁移步骤

  1. 重命名任何带有动态参数的页面以匹配新格式。
  2. 将<Nuxt>和<NuxtChild>更新为<NuxtPage>。
  3. 如果您使用的是 Composition API，您还可以迁移 this.$route 和 this.$router 以使用 useRoute 和 useRouter 可组合项。

示例：动态路由

Nuxt 2
- URL: /users
- Page: /pages/users/index.vue

- URL: /users/some-user-name
- Page: /pages/users/_user.vue
- Usage: params.user

- URL: /users/some-user-name/edit
- Page: /pages/users/_user/edit.vue
- Usage: params.user

- URL: /users/anything-else
- Page: /pages/users/_.vue
- Usage: params.pathMatch

示例：嵌套路由和 definePageMeta

vue
Nuxt 2
vue
<script>
export default {
  transition: 'page' // or { name: 'page' }
}
</script>

<template>
  <div>
    <NuxtChild keep-alive :keep-alive-props="{ exclude: ['modal'] }" :nuxt-child-key="$route.slug" />
  </div>
</template>

全局 NuxtLink 组件的大部分语法和功能都是相同的。 如果您一直在使用快捷方式 <NLink> 格式，您应该更新它以使用 <NuxtLink>。

<NuxtLink> 现在是 all 链接的直接替代品，甚至是外部链接。 您可以阅读更多关于它的信息，以及如何扩展它以提供您自己的链接组件，在文档中。

编程式导航

从 Nuxt 2 迁移到 Nuxt 3 时，您将必须更新以编程方式导航用户的方式。 在 Nuxt 2 中，您可以使用 this.$router 访问底层的 Vue 路由器。 在 Nuxt 3 中，您可以使用 navigateTo() 实用方法，它允许您将路由和参数传递给 Vue Router。

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

vue
Nuxt 2
vue
<script>
export default {
  methods: {
    navigate() {
      this.$router.push({
        path: '/search',
        query: {
          name: 'first name',
          type: '1'
        }
      })
    }
  }
}
</script>