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

Posted 2023-02-23

【中文标题】Nuxt.js - 如何在布局内使用布局

【英文标题】：Nuxt.js - How to use layout inside layout

【发布时间】：2019-01-27 10:58:07

【问题描述】：

我有我的默认布局，我想制作一个页面 带有布局和布局内部的组件将更改 insdie 并将 url 更改为

我如何用 nuxt 做到这一点？

像这样的图片：

我的基本布局为红色 我有一个蓝色的页面布局 现在我有一个链接和 Dashbord，我想当我点击链接时，里面的黑框只能由其他组件和 url 更改 但我没有再次调用蓝色布局

【问题讨论】：

请将第二个解决方案标记为正确的解决方案以帮助其他人，您正在寻找的称为嵌套路由。

【参考方案1】：

我遇到了类似的问题，并通过使用 <nuxt-child/> 嵌套页面来解决。

GIF: How it works

GitHub: Nuxt.js Nested Routes Example Repository (not official)

创建像pages/group-foo.vue这样的父页面：

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

然后，创建一个与父页面同名的目录：pages/group-foo/。

---

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

Nested Routes Dynamic Nested Routes API: The Component