頁面與版面配置

app.vue

Nuxt 3 透過 ~/app.vue 為您的應用程式提供一個中央入口點。

此檔案非常適合放置任何需要在應用程式啟動時執行一次的自訂程式碼，以及應用程式每個頁面上都會出現的任何元件。例如，如果您只有一個版面配置，您可以將其移至 app.vue 中。

遷移

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

版面配置

如果您在應用程式中為多個頁面使用版面配置，則只需要稍作更改。

在 Nuxt 2 中，<Nuxt> 元件用於在版面配置中呈現目前頁面。在 Nuxt 3 中，版面配置改用插槽，因此您必須將該元件替換為 <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 來定義 catch-all 路由，現在您使用 [...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. 如果您正在使用 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>