Nuxt.js - 如何在布局中使用布局

Question

我有默认布局，我想制作一个页面 具有布局，并且布局内部有一个组件，该组件将在内部进行更改并更改 url

我如何用 nuxt 做到这一点？

就像这张图片一样：

我的基本布局是红色的 我的页面布局是蓝色的 现在我有一个链接和 Dashbord，我想要什么时候我单击链接，里面的黑框仅由其他组件和 url 更改 但我没有再次调用蓝色布局

Answer 1

我遇到了类似的问题，并通过使用

<nuxt-child/>

嵌套页面解决了。

GIF：它是如何工作的

GitHub：Nuxt.js 嵌套路由示例存储库（非官方）

创建一个父页面，如

pages/group-foo.vue

：

<template>
  <div>
    <!-- ... -->
    <nuxt-child />
  </div>
</template>

然后，创建一个与父页面同名的目录：

pages/group-foo/

。

---

另外，请参阅这些官方文档：

• 嵌套路由
• 动态嵌套路由
• API：组件

Answer 2

如果你有一个default.vue、一个nested.vue和一个index.vue，并且你想在nested和default中依次嵌套下一个索引，只需在nested中添加一个默认标签即可。

嵌套.vue

<default>
  <p>My cintent in here</p>
</default>