頁面與佈局

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。請參閱錯誤處理文件。如果您想要確保此頁面使用佈局，您可以直接在 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 屬性給 <Nuxt>，您現在需要使用 definePageMeta 來設定這些選項。

頁面和佈局轉場

如果您過去直接在元件選項中定義頁面或佈局的轉場效果，您現在需要使用 definePageMeta 來設定轉場效果。自 Vue 3 起，-enter 和 -leave CSS 類別已被重新命名。當 <Nuxt> 的 style 屬性用於 <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>