关于vue-router无法在组件里显示的问题，求解

Question

项目结构是这样，

这是app文件

<template>
  <div id="app">
    <HeadM></HeadM>
    <Home></Home>
  </div>
</template>
<script>
    import HeadM from './components/index/header.vue'
    import Home from './components/index/home'
export default {
    components:{
        HeadM,
        Home,
    }
}
</script>

这是home文件

<template lang="html">
<div class="home">
    <div class="tab">
        <router-link :to="'/home/'+item" class="menu-item" v-for="(item,index) in tabList" :class="{active:show==item}" @click.native="show=item">
            <span class="item">{{tabTitle[index]}}</span>
        </router-link>
        <router-view></router-view>
    </div>
</div>
</template>
<script>
    export default {
        data(){
            return {
                show:'recommend',
                transitionName: '',
                tabList:['recommend','songlist','radio','top'],
                tabTitle:['个性推荐','歌单','主播电台','排行榜']
            }
        },
        methods:{

        }
    }
</script>

这是router

export default new Router({
    mode:'history',
  routes: [
    {
      path: '/',
      redirect: '/home',
        children:[
            {
                path:'/home',
                name:'Home',
                redirect:'/home/recommend',
                component:Home,
                children:[
                    {
                        path: '/home/recommend',
                        name: 'Recommend',
                        component: Recommend
                    },
                    {
                        path: '/home/radio',
                        name: 'Radio',
                        component: Radio
                    },
                    {
                        path: '/home/top',
                        name: 'Top',
                        component: Top
                    },
                    {
                        path: '/home/songlist',
                        name: 'SongList',
                        component: SongList
                    },
                    {
                        path:'/home/songListDetail/:id',
                        name:'songListDetail',
                        component:songListDetail
                    }
                ]
            }
        ]
    }
  ]
})

结果就是这个结果 求解是哪里出错了

Answer 1

你在'/'路由跳转到'/home'，但是又将'/home'路由对应的组件写在了'/'的children中，可以把'/home‘单独分出来和'/'路由并列