页面和布局

app.vue

Nuxt 3 通过 ~/app.vue 提供了一个中心入口点来启动你的应用。

这个文件是一个很好的地方，可以放置在应用启动时只需运行一次的任何自定义代码，以及出现在应用的每个页面上的任何组件。例如，如果你只有一个布局，你可以将它移动到 app.vue 中。

迁移

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

布局

如果你的应用中使用了多个页面的布局，只需要进行轻微的更改。

在 Nuxt 2 中，<Nuxt> 组件在布局中用于渲染当前页面。在 Nuxt 3 中，布局使用插槽（slots）代替，所以你需要用 <slot /> 替换该组件。这也允许使用具名和作用域插槽进行高级用法。了解更多关于布局的信息。

你还需要更改如何定义页面使用的布局，使用 definePageMeta 编译器宏。布局将使用 kebab-case。因此，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。查看错误处理文档。如果你想确保该页面使用布局，你可以直接在 error.vue 中使用 <NuxtLayout>：
   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 来定义捕获所有路由，现在你需要使用 [...slug].vue。

嵌套路由

在 Nuxt 2 中，你使用 <Nuxt> 和 <NuxtChild> 定义任何嵌套路由（带有父组件和子组件）。在 Nuxt 3 中，它们被一个单一的 <NuxtPage> 组件替代。

页面键和 keep-alive 属性

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

页面和布局过渡

如果你之前在组件选项中直接定义页面或布局的过渡效果，现在你需要使用 definePageMeta 来设置过渡效果。自 Vue 3 以来，-enter 和 -leave 的 CSS 类名已更名。<Nuxt> 的 style 属性不再适用于在 <slot> 上使用过渡效果，所以将样式移动到你的 -active 类中。

迁移

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

示例：动态路由

- URL: /users
- 页面: /pages/users/index.vue

- URL: /users/some-user-name
- 页面: /pages/users/_user.vue
- 使用：params.user

- URL: /users/some-user-name/edit
- 页面: /pages/users/_user/edit.vue
- 使用：params.user

- URL: /users/anything-else
- 页面: /pages/users/_.vue
- 使用：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' // 或 { 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: '姓名',
          type: '1'
        }
      })
    }
  }
}
</script>