nuxt3使用NuxtPage实现子页面嵌套渲染_动态路由:

-| pages/
---| parent/
------| child.vue
---| parent.vue
  
最终渲染后的route:
[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]
上面这个有一个非常好用的场景就是，当站点有sidebar的时候，可以把sidebar定义为上面这种格式，通过不同的child去渲染页面
  
//To display the child.vue component, you have to insert the <NuxtPage> component inside pages/parent.vue
pages/parent.vue:
<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtPage :foobar="123" />
  </div>
</template>
  
pages/parent/child.vue:
<script setup lang="ts">
const props = defineProps(['foobar'])
  
console.log(props.foobar)
</script>
  
参考：https://nuxt.com/docs/guide/directory-structure/pages