Vue-router：嵌套 router-views 在命名 router-views 中

Question

我想将组件传递给命名路由器视图。我的组件：

// Main.vue
<template>
  <div>
    <div class="header">
      <router-view name="header"></router-view>
    </div>
    <div class="content">
      <div class="left-content">
        <router-view name="left-content"></router-view>
      </div>
      <div class="right-content">
        <router-view name="right-content"></router-view>
      </div>
    </div>
    <div class="footer">
      <router-view name="footer"></router-view>
    </div>
  </div>
</template>

我的其他组件

// Header.vue
<template>
  <div>
    <div class="header-content">
      <router-view></router-view>
    </div>
    <div class="button">
      <!-- content for button -->
    </div>
  </div>
</template>

我的路线 // Routes.js

const main = {
  path: "/",
  name: "main",
  component: Main,
  children: [{
    name: "children",
    path: "children",
    components: {
      header: Header,
      left: LeftComponent,
      right: RightComponent,
      footer: FooterComponent
    }
  }]
}

如何在 Header

中注入组件

我的尝试是这样的：我尝试有一个 children 到 Header 组件，但是它不起作用

const main = {
  path: "/",
  name: "main",
  component: Main,
  children: [{
    name: "children",
    path: "children",
    components: {
      header: {
        path: '',
        component: Header,
        children: [{ path: "", component: A }]
      },
      left: LeftComponent,
      right: RightComponent,
      footer: FooterComponent
    }
  },
  {
    name: "children2",
    path: "children2",
    components: {
      header: {
        path: '',
        component: Header,
        children: [{ path: "", component: B }]
      },
      left: LeftComponent,
      right: RightComponent,
      footer: FooterComponent
    }
  }]
}

Answer 1

参见：Components Basics 。不要使用 router-view，使用组件本身：

<template>
  <div>
    <header />
    <left-content />
    <!-- ... -->
  </div>
</template>

<script>
import Header from './path/to/your/header/file'
import LeftContent from './path/to/your/leftContent/file'
// ...

export default {
  components: {
    Header,
    LeftContent,
    // ...
  }
}
</script>

然后，在组件中，例如在Header中：

<template>
  <div class="header">
    <div class="header-content">
      <A v-if="isInFirstChildren" />
      <B v-else />
    </div>
    <div class="button">
      <!-- content for button -->
    </div>
  </div>
</template>

<script>
import A from './path/to/file'
import B from './path/to/file'

export default {
  components: {
    A,
    B
  },
  computed: {
    isInFirstChildren () {
      return this.$route.name === 'children'
    }
  }
}
</script>

Answer 2

我找到了我正在寻找的解决方案，您需要组件属性并且 children 将应用于它，例如：

const main = {
  path: "/",
  name: "main",
  component: Main,
  children: [{
    name: "children",
    path: "children",
    component: Header
    components: {
      header: Header
      left: LeftComponent,
      right: RightComponent,
      footer: FooterComponent
    },
    children:[{
        path: "",
        name: "A",
        components: {
            default: A
        }
    }]
  },
  {
    name: "children2",
    path: "children2",
    component: Header
    components: {
      header: Header
      left: LeftComponent,
      right: RightComponent,
      footer: FooterComponent
    },
    children:[{
        path: "",
        name: "B",
        components: {
            default: B
        }
    }]
  }]
}

Vue-router：嵌套 router-views 在命名 router-views 中

Vue-router: Nested router-views in named router-views

vue.js

vue-router