Nuxt 3 中的嵌套页面

Question

我有类似的结构

/pages/
      section/
             index.vue
             out[id].vue

index.vue 的侧面菜单带有

id

。如何在

out[id].vue

内渲染

index

？

类似于 Nuxt 嵌套页面，但在 Nuxt3 中。

我可以嵌套非子页面吗？

Answer 1

适用于

/pages/
      section.vue
      section/
             index.vue
             out[id].vue

在

section.vue

中，禁用父布局（即app.vue）并指定一个新的NuxtLayout实例：

<script setup>
    definePageMeta({ layout: false })
</script>


<template>
  <div>
    <NuxtLayout>
      <NuxtLink to="section/">index</NuxtLink>
      <NuxtLink to="section/out1">out1</NuxtLink>
      <NuxtLink to="section/out2">out2</NuxtLink>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

Answer 2

可以使用

<NuxtPage>

显示嵌套路由。

来源

更多关于

<NuxtPage>

：https://nuxt.com/docs/api/components/nuxt-page#nuxtpage