CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-router
Victor Ferreira
Victor Ferreira

Reputation: 6449

Can't render child component with VueRouter

I'm learning VueJS, created a new Vue app with the vue-cli, and changed it a little bit. This is what I have in my router.js:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Panel from '@/components/Panel'
import Search from '@/components/Search'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/panel',
      name: 'Panel',
      component: Panel,
      children: {
        path: 'search',
        component: Search
      }
    }
  ]
})

My Panel.vue renders properly without a 'children' key in the router object. This is the content:

<template>
  <div class="panel">
    <h1>Panel</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'panel',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

And Search.vue is very similar

<template>
  <div class="search">
    <h1>Search</h1>
    <p>Lorem ipsum ...</p>
  </div>
</template>

<script>
export default {
  name: 'search',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

With this configuration, as explained here: https://router.vuejs.org/en/essentials/nested-routes.html

I get this error:

vue-router.common.js?37ec:598Uncaught TypeError: route.children.some is not a function

And a blank page is displayed.

I want, for example, localhost:port/#/panel to display the Panel component only (this is not so important).

And localhost:port/#/panel/search to display the Search component, that is wrapped by Panel component (this is the important part, because nobody would actually go to just /panel).

Could anybody give some help?

Upvotes: 1

Views: 2973

Answers (1)

Belmin Bedak
Belmin Bedak

Reputation: 9201

It's because children should be array of objects, and some is method that lives on array, so that's why you are getting error.

  children: [{
    path: 'search',
    component: Search
  }]

Upvotes: 8

Related Questions