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

Question

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不久... 求大佬们指点！谢谢大家！