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