vue-router named view in child route is not working

Question

Nested route with named router view is not loaded. Upon clicking the links shown in navigation drawer, corresponding content needs to be shown in v-content component. For this I've used named router views.

Below shown is the routes array.

routes: [
    {
      path: "",
      redirect: { name: "home" }
    },
    {
      path: "/home",
      component: Home,
      name: "home",
      children: [
        {
          path: "",
          redirect: { name: "showDashItems" }
        },
        {
          path: "dash",
          name: "showDashItems",
          components: {
            nav_drawer: Nav
          },
          children: [
            {
              path: "page1",
              name: "DashPage1",
              components: {
                content_window: Page1
              }
            },
            {
              path: "page2",
              name: "DashPage2",
              components: {
                content_window: Page2
              }
            },
            {
              path: "page3",
              name: "DashPage3",
              components: {
                content_window: Page3
              }
            }
          ]
        }
      ]
    }
  ]

Here is the codepen showing the same issue. https://codepen.io/satishvarada/pen/WNvMpdq

Answer 1

Parent route should have the view mentioned in order to make its children access it. In this codepen, A dummy component named contentArea is created and used in content_window to fulfill the request

const contentArea = {
  template: `<router-view name="content_window" />`
}

{
          path: "dash",
          name: "showDashItems",
          components: {
            nav_drawer: Nav,
            content_window: contentArea
          },
          children: [
            {
              path: "page1",
              name: "DashPage1",
              components: {
                content_window: Page1
              }
            }
         ]
}

Answer 2

The navigation drawer can't be a route, it must be the component child of Home.

There are other litle mistakes in your code, but I fixed.

See the new code:

const Page1 = {
  template: `<p>Hello Page1...!!!</p>`
};

const Page2 = {
  template: `<p>Hello Page2...!!!</p>`
};

const Page3 = {
  template: `<p>Hello Page3...!!!</p>`
};
const Nav = {
  template: `
  <v-list elevation="0">
      <v-list-item v-for="(item, i) in items" :key="i" :to="{ name: item.name }">
        <v-list-item-icon>
          <v-icon v-text="item.icon"></v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title v-text="item.text"></v-list-item-title>
        </v-list-item-content>
      </v-list-item>
  </v-list>`,
  data: () => ({
    items: [
      { text: "Page 1", icon: "mdi-clock", name: "DashPage1" },
      { text: "Page 2", icon: "mdi-account", name: "DashPage2" },
      { text: "Page 3", icon: "mdi-flag", name: "DashPage3" }
    ]
  })
};

const Home = {
  template: `
  <div>
    <v-navigation-drawer v-model="drawer" clipped app>
      <Nav></Nav>
    </v-navigation-drawer>
    <v-app-bar clipped-left app color="#145d8c" dark height="32">
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
        <span class="hidden-sm-and-down">My App</span>
      </v-toolbar-title>
      <v-tabs v-model="tab" dark>
        <v-tabs-slider></v-tabs-slider>
        <v-tab v-for="i in tabs" :key="i.name" :to="i.location" style="color:white">{{i.name}}</v-tab>
      </v-tabs>
    </v-app-bar>
    <v-content app>
      <router-view name="content_window"></router-view>
    </v-content>
  </div>`,
  components: { Nav },
  data: () => ({
    drawer: true,
    tab: "",
    tabs: [
      {
        name: "Dashboard",
        location: `/home/dash`
      }
    ]
  })
};

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "",
      redirect: { name: "home" }
    },
    {
      path: "/home",
      component: Home,
      name: "home",
      children: [
        {
          path: "page1",
          name: "DashPage1",
          components: {
            content_window: Page1
          }
        },
        {
          path: "page2",
          name: "DashPage2",
          components: {
            content_window: Page2
          }
        },
        {
          path: "page3",
          name: "DashPage3",
          components: {
            content_window: Page3
          }
        }
      ]
    }
  ]
});

router.push("/home");

new Vue({
  router,
  el: "#app",
  vuetify: new Vuetify()
});