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 '@/ponents/Hello'
import Panel from '@/ponents/Panel'
import Search from '@/ponents/Search'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      ponent: Hello
    },
    {
      path: '/panel',
      name: 'Panel',
      ponent: Panel,
      children: {
        path: 'search',
        ponent: 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: 'Wele 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: 'Wele to Your Vue.js App'
    }
  }
}
</script>

With this configuration, as explained here: .html

I get this error:

vue-routermon.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 ponent only (this is not so important).

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

Could anybody give some help?

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 '@/ponents/Hello'
import Panel from '@/ponents/Panel'
import Search from '@/ponents/Search'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      ponent: Hello
    },
    {
      path: '/panel',
      name: 'Panel',
      ponent: Panel,
      children: {
        path: 'search',
        ponent: 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: 'Wele 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: 'Wele to Your Vue.js App'
    }
  }
}
</script>

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

I get this error:

vue-router.mon.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 ponent only (this is not so important).

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

Could anybody give some help?

• javascript
• vue.js
• vuejs2
• vue-ponent
• vue-router

1 Answer 1

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',
    ponent: Search
  }]