子路由中的 vue-router 命名视图不起作用

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

父路由应该具有提到的视图，以使其子路由访问它。 在this codepen 中，创建了一个名为 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
              }
            }
         ]
}