[Vuejs]-Vue-router: Nested router-views in named router-views

by

0👍

✅

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

0👍

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>

Leave a comment