VueRouter로 하위 구성 요소를 렌더링 할 수 없습니다.

Question

저는 VueJS를 배우고 vue-cli로 새 Vue 응용 프로그램을 만든 다음 조금 변경했습니다.

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 라우터 객체에 '어린이'키없이 제대로 렌더링 : 이것은 내 router.js에있는 것입니다. 이 콘텐츠입니다 :

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

매우 유사합니다

vue-router.common.js?37ec:598Uncaught TypeError: route.children.some is not a function

:

https://router.vuejs.org/en/essentials/nested-routes.html 나는이 오류

빈 페이지가 표시됩니다.

예를 들어 localhost:port/#/panel에 Panel 구성 요소 만 표시하려는 경우 (중요하지 않음).

그리고 localhost:port/#/panel/search는이 Panel 구성 요소 (아무도 실제로 단지 /panel로 갈 것이기 때문에 이것이 중요한 부분이다)에 의해 포장되면, Search 구성 요소를 표시합니다.

아무도 도움을 줄 수 있습니까?

Answer 1

어린이가 객체의 배열이어야하고 some이 배열에있는 메소드이기 때문에 오류가 발생합니다.

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