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

Question

I have a vue app with two router-views for the layout and content in the App.vue file:

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

The routes are then configured with a layout component as well as a content component:

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

This is all working correctly. However, I am now trying to add a page using nested routes to render different components inside different vuetify tabs.

new route:

{
  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>

The tabs are rendered correctly, and go to the correct routes, but without any content. I tried using a router-link instead of the v-tab without success, so I think the issue is related to the router setup, and nothing specific to the tabs.

If I move the "content" router-view outside of the "layout" router view, the tab specific content then shows up correctly, so it seems like there's something with the nesting of the routes/router-views that isn't working, but so far I have been unable to figure out what.

Code sandbox showing the issue here

question from:https://stackoverflow.com/questions/65831951/no-content-with-vue-router-nested-routes-and-multiple-router-views

Answer 1

Your routes is defined correctly, but you have not exported your TabOne and TabTwo components.

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