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

Question

I want to pass in a component to a named router view. My components:

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

my other component

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

my routes // Routes.js

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

How can I inject a component in Header

my attempt is like this: I try to have a children to Header component, but it doesn't work

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

I found the solution that I was looking for, you need to have the component property and the children will apply to it, like in example:

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

Answer 2

See: Components Basics . Don't use router-view, use component itself:

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

Then, in component, for example in 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>