使用 nuxt-child 的布局而不是父级的布局答案

【问题标题】：Using nuxt-child's layout instead of the parent's使用 nuxt-child 的布局而不是父级的布局
【发布时间】：2020-12-02 14:39:26
【问题描述】：

我在 nuxt.js 上使用嵌套路由和 <nuxt-child> 布局。

父级持有<nuxt-child>组件，它正在查看父级的子路由。

我希望 Nuxt 在我在其路由/子路由上时使用父级的布局，但如果任何子级有自己的布局，我希望 Nuxt 使用它而不是父级的布局。

我的文件排列是这样的：

pages/
--- parent/
------ child.vue
--- parent.vue
layouts/
--- parentLayout.vue
--- childLayout.vue

pages/parent.vue

<template>
  <nuxt-child />
</template>

<script>
export default {
  layout: "parentLayout",
};
</script>

pages/parent/child.vue

<template>
  <span>child.vue</span>
</template>

<script>
export default {
  layout: "childLayout",
};
</script>

所以基于这个例子：

我希望 Nuxt 在我在 parent/ 路由或子路由上时使用布局“parentLayout”，尽管我想每当我在 parent/child 或其子路由上时显示不同的布局 - 'childLayout'。

问题是，即使我去父/子，正在使用的布局是'parentLayout'而不是'childLayout'，这是因为我使用的是<nuxt-child>。

我尝试过使用this.$nuxt.setLayout()，但 Nuxt 似乎仍然首先加载父级的布局，这使得渲染看起来不正常。

我如何克服这个问题并为 child.vue 及其子路由使用想要的布局？

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

对此的解决方案是有条件地在父级中设置layout。

export default {
  name: 'Parent',
  layout ({ route }) {
    if (route.name === 'parent-child-id') {
      return 'childLayout'
    }
    return 'parentLayout'
  },
  data () {
    return {}
  }
}

【讨论】：