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

Question

我有一个 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
    }
  ]
}

Tabs.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>

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

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

显示问题的代码沙箱here

Answer 1

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

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

Answer 2

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

App.vue

<component :is="layoutComponent" />

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

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

更新了代码沙箱here

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

No content with vue-router nested routes and multiple router-views

vue.js

vue-router