页面和布局

app.vue

Nuxt 3 通过 ~/app.vue 为您的应用程序提供一个中心入口点。

此文件是放置需要在应用程序启动时运行一次的任何自定义代码以及应用程序每个页面上存在的任何组件的好地方。例如，如果您只有一个布局，则可以将其移动到 app.vue 中。

迁移

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

布局

如果您在应用程序中为多个页面使用布局，则只需要进行细微的更改。

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

您还需要更改定义页面使用的布局的方式，使用 definePageMeta 编译器宏。布局将使用短横线命名法。因此，当在您的页面中引用 layouts/customLayout.vue 时，它将变为 custom-layout。

迁移

1. 将 <Nuxt /> 替换为 <slot />
   layouts/custom.vue

     <template>
       <div id="app-layout">
         <main>
   -       <Nuxt />
   +       <slot />
         </main>
       </div>
     </template>
   

2. 使用 definePageMeta 来选择页面使用的布局。
   pages/index.vue

     <script>
   + definePageMeta({
   +   layout: 'custom'
   + })
   - export default {
   -   layout: 'custom'
   - }
     </script>
   

3. 将 ~/layouts/_error.vue 移动到 ~/error.vue。请参阅 错误处理文档。如果您想确保此页面使用布局，您可以在 <NuxtLayout> 中直接在 error.vue 中使用。
   error.vue

   <template>
     <div>
       <NuxtLayout name="default">
         <!-- -->
       </NuxtLayout>
     </div>
   </template>
   

页面

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

动态路由

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

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

嵌套路由

在 Nuxt 2 中，您将使用 <Nuxt> 和 <NuxtChild> 定义任何嵌套路由（带有父组件和子组件）。在 Nuxt 3 中，这些已被单个 <NuxtPage> 组件取代。

页面键和 Keep-alive Props

如果您要将自定义页面键或 keep-alive props 传递给 <Nuxt>，您现在将使用 definePageMeta 来设置这些选项。

页面和布局过渡

如果您直接在组件选项中为页面或布局定义了过渡，则现在需要使用 definePageMeta 来设置过渡。由于 Vue 3，-enter 和 -leave CSS 类已被重命名。<Nuxt> 中的 style prop 在 <slot> 上使用时不再适用于过渡，因此请将样式移动到您的 -active 类。

迁移

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

示例：动态路由

- 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

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

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

<NuxtLink> 组件

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

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

编程式导航

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

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