时间戳

首页 > 解决方案 > vue-router 嵌套路由和多个路由器视图没有内容

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

问题描述

我有一个 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 没有成功，所以我认为问题与路由器设置有关，与选项卡无关。

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

在此处显示问题的代码沙箱

标签： vue.jsvue-router

解决方案

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

应用程序.vue

<component :is="layoutComponent" />

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

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

在此处更新代码沙箱

推荐阅读