在Vue中切换一组嵌套路线的顶级内容

Question

我想切换一组嵌套路线的顶级出口的内容。

我正在与Vue和Laravel建立多语言SPA，以向种植者展示农作物有害生物信息。单击主页上的链接将使用有害生物列表填充新的（嵌套的）视图；单击任何给定的害虫，将其替换为包含有关该害虫的情况说明书的视图。

所有这些页面相对于主页都被视为子页面-这是我的问题的根源。虽然可以在显示子视图时关闭主页内容，但我不知道如何在返回主页时将其重新打开。

我的主页组件是：

<template>
<div>
    <div class='home' v-if="bShowHome">... home page content...</div>
    <router-view @data="onData">... child routes/pages ...</router-view>
</div>
</template> 


<script>
export default {
  name: "home",
  data() {
      return {
          bShowHome: true
      }
  },
  methods: {
    onData(data){
        this.bShowHome=data;
    }
  }
};
</script>

在装入该子视图时，使用$ emit方法“关闭”主页内容。

当随后单击“主页”链接时，我/我应该采取什么方法重新打开主页内容？