無法渲染VueRouter的子組件

我在學習VueJS，用vue-cli創建了一個新的Vue應用程序，並對其進行了一些改動。這是我在我的router.js：無法渲染VueRouter的子組件

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）包裹。

有人可以幫忙嗎？

來源

2017-02-27 Victor Ferreira

這是因爲孩子應該是對象的數組，而some是居住在數組上的方法，所以這就是爲什麼你會得到錯誤。

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

來源

2017-02-27 18:32:13

無法渲染VueRouter的子組件

回答

相關問題