vue - поименованный маршрутизатор в дочернем маршруте не работает

Question

Вложенный маршрут с указанным именем маршрутизатора не загружен. При нажатии на ссылки, показанные в навигационной панели, соответствующий контент должен отображаться в компоненте v-content. Для этого я использовал именованные виды маршрутизатора.

Ниже показан массив маршрутов.

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
              }
            }
          ]
        }
      ]
    }
  ]

Вот кодовая ручка, показывающая ту же проблему. https://codepen.io/satishvarada/pen/WNvMpdq

Answer 1

Блок навигации не может быть маршрутом, он должен быть дочерним компонентом Home.

В вашем коде есть и другие небольшие ошибки, но я исправил.

См. Новое код:

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()
});

Answer 2

Родительский маршрут должен иметь упомянутое представление, чтобы его дочерние узлы могли к нему обращаться. В этой кодовой ручке создается фиктивный компонент с именем contentArea, который используется в content_window для выполнения запроса

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
              }
            }
         ]
}