vue-router 嵌套路由和多个路由器视图没有内容答案

【问题标题】：No content with vue-router nested routes and multiple router-viewsvue-router 嵌套路由和多个路由器视图没有内容
【发布时间】：2021-04-26 03:22:38
【问题描述】：

我有一个 vue 应用程序，其中包含两个路由器视图，用于 App.vue 文件中的布局和内容：

<router-view name="layout">
  <div>
    <router-view name="content" />
  </div>
</router-view>

然后用布局组件和内容组件配置路由：

{
  path: "/",
  components: {
    layout: Layout,
    content: ExampleContent
  }
}

这一切正常。但是，我现在正在尝试使用嵌套路由添加一个页面，以在不同的 vuetify 选项卡中呈现不同的组件。

新路线：

{
  path: "/tabs",
  components: {
    layout: Layout,
    content: Tabs
  },
  children: [
    {
      path: "one",
      component: TabOne
    },
    {
      path: "two",
      component: TabTwo
    }
  ]
}

标签.vue

<template>
  <div>
    <h1>Tabs</h1>
    <v-tabs>
      <v-tab v-for="tab in tabs" :key="tab.id" :to="tab.route" exact>{{
        tab.name
      }}</v-tab>
    </v-tabs>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: 1, name: "Tab One", route: `/tabs/one` },
        { id: 2, name: "Tab Two", route: `/tabs/two` },
      ],
    };
  },
};
</script>

标签正确呈现，并转到正确的路线，但没有任何内容。我尝试使用路由器链接而不是 v-tab 没有成功，所以我认为问题与路由器设置有关，与选项卡无关。

如果我将“内容”路由器视图移到“布局”路由器视图之外，则选项卡特定内容会正确显示，因此路由/路由器视图的嵌套似乎有些东西不是t 工作，但到目前为止我一直无法弄清楚是什么。

显示问题的代码沙盒here

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

您的路线定义正确，但您尚未导出 TabOne 和 TabTwo 组件。

<script>
export default {
  name: "TabOne"
};
</script>

【讨论】：

啊，是的，在为我的代码沙箱示例简化它时，我没有添加它。我现在添加了出口，但仍然有同样的问题。

【解决方案2】：

我无法找到直接解决此问题的方法，但我确实找到了解决方法。我没有在路由中指定布局组件，而是在 App.vue 中添加了逻辑来呈现正确的组件。

App.vue

<component :is="layoutComponent" />

computed: {
  layoutComponent: function () {
    return Layout;
  },
},

然后从路由定义中移除布局的配置。布局中只有一个路由器视图组件，孩子们可以正常工作。

更新代码沙箱here

【讨论】：