頁面和佈局

app.vue

Nuxt 3 透過 ~/app.vue 為您的應用程式提供了一箇中心入口。

此檔案是放置任何需要在應用程式啟動時執行一次的自定義程式碼以及應用程式每個頁面上存在的任何元件的好地方。例如，如果您的應用程式只有一個佈局，您可以將其移動到 app.vue 中。

遷移

考慮建立一個 app.vue 檔案幷包含任何需要在應用程式頂層執行一次的邏輯。您可以在此處檢視示例。

佈局

如果您在應用程式中將佈局用於多個頁面，則只需進行細微更改。

在 Nuxt 2 中，<Nuxt> 元件在佈局中使用以渲染當前頁面。在 Nuxt 3 中，佈局使用插槽代替，因此您必須將該元件替換為 <slot />。這也允許使用命名插槽和作用域插槽的高階用例。閱讀更多關於佈局的資訊。

您還需要更改如何使用 definePageMeta 編譯器宏定義頁面使用的佈局。佈局將使用 kebab-case 命名。因此，app/layouts/customLayout.vue 在您的頁面中引用時變為 custom-layout。

遷移

1. 將 <Nuxt /> 替換為 <slot />
   app/layouts/custom.vue

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

2. 使用 definePageMeta 選擇頁面使用的佈局。
   app/pages/index.vue

   + <script setup>
   + definePageMeta({
   +   layout: 'custom'
   + })
   - <script>
   - 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 整合，它由您的源目錄中是否存在 app/pages/ 目錄觸發。如果您只有一個頁面，您不妨考慮將其移動到 app.vue 以獲得更輕量的構建。

動態路由

Nuxt 3 中定義動態路由的格式與 Nuxt 2 略有不同，因此您可能需要重新命名 app/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 類已重新命名。當在 <slot> 上使用時，<Nuxt> 的 style 屬性不再適用於過渡，因此請將樣式移動到您的 -active 類中。

遷移

1. 重新命名所有帶有動態引數的頁面以匹配新格式。
2. 將 <Nuxt> 和 <NuxtChild> 更新為 <NuxtPage>。
3. 如果您使用的是組合式 API，您還可以將 this.$route 和 this.$router 遷移為使用 useRoute 和 useRouter 可組合函式。

示例：動態路由

- 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

- 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/[...slug].vue
- Usage: params.slug

示例：巢狀路由和 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>

<template>
  <div>
    <NuxtPage />
  </div>
</template>

<script setup lang="ts">
// This compiler macro works in both <script> and <script setup>
definePageMeta({
  // you can also pass a string or a computed property
  key: route => route.slug,
  transition: {
    name: 'page',
  },
  keepalive: {
    exclude: ['modal'],
  },
})
</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>

<script setup lang="ts">
function navigate () {
  return navigateTo({
    path: '/search',
    query: {
      name: 'first name',
      type: '1',
    },
  })
}
</script>