vue.js中使用router路由设置后children的component失效。

import Vue from 'vue'import Router from 'vue-router'import Hello from '@/components/Hello'import Apple from '@/components/apple';import Banbana from '@/components/banbana';import RedApple from '@/components/redapple';Vue.use(Router);export default new Router({  mode: 'history',  routes: [ //路由配置    {      path: '/',      component: Hello    },    {      path: '/apple',      component: Apple,      children: [        {          path: 'red',          component: RedApple        }      ]    },    {      path: '/banbana',      component: Banbana    }  ]})

以上代码中 8080/ 是输出组件Hello是正确的 ， 8080/apple 输入的是组件apple也是正确的 ， 但是输入8080/apple/red 的时候不会跳转到 path：'red'对应的子组件RedApple中。

用import RedApple from '../components/redapple'的方法在 components : {RedApple} 注册后在页面中使用 <RedApple></RedApple> 是可以直接输出 RedApple里面的内容的，而使用路由却不行，这是为什么呢？

本人刚刚开始学习vue.js不久... 求大佬们指点！谢谢大家！