<NuxtPage>
必須使用 <NuxtPage> 元件來顯示位於 pages/ 目錄中的頁面。
<NuxtPage> 是一個 Nuxt 內建的元件。它讓你可以顯示位於 pages/ 目錄中的頂層或巢狀頁面。
應該使用
<NuxtPage> 來取代 <RouterView>，因為前者會額外處理內部狀態。否則，useRoute() 可能會返回不正確的路徑。屬性
name：告知RouterView渲染匹配路由記錄的 components 選項中具有相應名稱的元件。- 類型：
string
- 類型：
route：已解析其所有元件的路徑位置。- 類型：
RouteLocationNormalized
- 類型：
pageKey：控制何時重新渲染NuxtPage元件。- 類型：
string或function
- 類型：
transition：為使用NuxtPage元件渲染的所有頁面定義全域轉場效果。- 類型：
boolean或TransitionProps
- 類型：
keepalive：控制使用NuxtPage元件渲染的頁面的狀態保留。- 類型：
boolean或KeepAliveProps
- 類型：
Nuxt 會自動掃描並渲染
/pages 目錄中找到的所有 Vue 元件檔案，以此解析 name 和 route。範例
例如，傳遞 static 鍵時，NuxtPage 元件只會在掛載時渲染一次。
app.vue
<template>
<NuxtPage page-key="static" />
</template>
你也可以使用基於目前路由的動態鍵
<NuxtPage :page-key="route => route.fullPath" />
請不要在這裡使用
$route 物件，因為它可能會導致 <NuxtPage> 使用 <Suspense> 渲染頁面時出現問題。或者，可以透過在 /pages 目錄中的 Vue 元件的 <script> 區塊中使用 definePageMeta 將 pageKey 作為 key 值傳遞。
pages/my-page.vue
<script setup lang="ts">
definePageMeta({
key: route => route.fullPath
})
</script>
在 文件 > 範例 > 路由 > 頁面 中閱讀並編輯一個線上範例。
頁面 Ref
要取得頁面元件的 ref，請透過 ref.value.pageRef 存取它
app.vue
<script setup lang="ts">
const page = ref()
function logFoo () {
page.value.pageRef.foo()
}
</script>
<template>
<NuxtPage ref="page" />
</template>
my-page.vue
<script setup lang="ts">
const foo = () => {
console.log('foo method called')
}
defineExpose({
foo,
})
</script>
自訂屬性
此外，<NuxtPage> 也接受你可能需要向下層級傳遞的自訂屬性。
這些自訂屬性可以透過 Nuxt 應用程式中的 attrs 來存取。
<NuxtPage :foobar="123" />
例如，在上面的範例中，可以在模板中使用 $attrs.foobar 或在 <script setup> 中使用 useAttrs().foobar 來取得 foobar 的值。