无法使用VueRouter呈现子组件

Question

我正在学习VueJS，使用vue-cli创建了一个新的Vue应用程序，并对其进行了一些更改。这是我在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
      }
    }
  ]
})

我的Panel.vue可以正确呈现，而在路由器对象中没有'children'键。这是内容：

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

和Search.vue非常相似

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

使用此配置，如下所述：https : //router.vuejs.org/en/essentials/nested-routes.html

我收到此错误：

vue-router.common.js？37ec：598Uncaught TypeError：route.children.some不是函数

并显示空白页。

例如，我希望仅localhost:port/#/panel显示Panel组件（这不是那么重要）。

和localhost:port/#/panel/search显示Search部件，由包装Panel组件（这是很重要的部分，因为没有人会真正去只/panel）。

有人可以帮忙吗？

Answer 1

这是因为子级应该是对象数组，并且some是驻留在数组上的方法，所以这就是为什么会出错的原因。

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