vue2.x中嵌套路由的使用

Question

代码中需要多层嵌套，代码如下：

app.vue：

<template>
  <div id="app">
    <router-view></router-view>
    <Footbar></Footbar>
  </div>
</template>

home.vue

<template id="home">
    <div class="homepage">
        <el-menu theme="red" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">
                <router-link to="/home/hotnews">热点</router-link>
            </el-menu-item>
            <el-menu-item index="2">
                <router-link to="/home/myself">订阅</router-link>
            </el-menu-item>
            <el-menu-item index="3">
                <router-link to="/home/online">直播</router-link>
            </el-menu-item>
        </el-menu>
        <router-view></router-view>
    </div>
</template>

myself.vue

<template id="myself">
  <div>
    <p>订阅</p>
  </div>
</template>

route.js

  routes: [{
            name: 'root',
            path: '/',
            redirect: '/home'
        },
        {
            name: 'home',
            path: '/home',
            component: Home,
            children: [{
                    path: '/hotnews',
                    component: Hotnews
                },
                {
                    path:'/myself',
                    component:Myself
                },
                {
                    path:'/online',
                    component:Online
                }
            ]
        },
        {
            name: 'goods',
            path: 'goods',
            component: Goods
        }
    ]

点击跳转之后没有显示对应的东西，好像是在app.vue中的router-view中切换的 问下这个怎么让在home的route-view中切换