javascript - 无法使用 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 在路由器对象中没有“子”键的情况下正确呈现。这是内容:

<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 is not a function

然后显示一个空白页。

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

和 localhost:port/#/panel/search 显示 Search 组件，它被 Panel 组件包裹(这是重要的部分，因为实际上没有人会去 /panel)。

有人可以帮忙吗？

Answer 1

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

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