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：598未捕获TypeError： route.children.some 不是函数

显示空白页面。

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

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

有人可以帮忙吗？

Answer 1

这是因为孩子应该是对象数组，some是生成在数组上的方法，所以这就是你得到错误的原因。

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

无法使用VueRouter呈现子组件

1 个答案: