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

Question

10

我有一个默认的布局，现在想要创建一个页面，该页面包含一个布局和一个组件。这个组件会被不断更改，并且会更改URL。

我应该如何在Nuxt中实现这一点？

类似于这张图片：

我的基础布局为红色，页面布局为蓝色。现在，在Dashboard下面有一些链接。当我点击这些链接时，黑色框内的内容只会被其他组件替换，并且URL会相应更改。但是，Nuxt不会重新调用蓝色布局。

- Hai the man

请将第二个解决方案标记为正确的，以帮助其他人。你正在寻找的是称为嵌套路由的东西。 - Khalil Bz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dyanagi · Accepted Answer

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

创建一个名为pages/group-foo.vue 的父页面：

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

接下来，创建一个与父页面相同名称的目录：pages/group-foo/。

另外，请参考以下官方文档：