无法使用 VueRouter 渲染子组件答案

【问题标题】：Can't render child component with VueRouter无法使用 VueRouter 渲染子组件
【发布时间】：2017-07-18 12:05:14
【问题描述】：

我正在学习 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）。

有人可以帮忙吗？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案1】：

这是因为 children 应该是对象数组，而 some 是存在于数组上的方法，所以这就是你得到错误的原因。

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

【讨论】：

谢谢！你是救世主❤️