router-view多層嵌套路由，沒有效果

初學(xué)vue.js，想使用vue.js搭建一個(gè)后臺(tái)管理的框架，其中使用到Vue Router，使用到嵌套路由，但是router-view的內(nèi)容并沒有顯示，以下是我的組件的結(jié)構(gòu)

main.js仲，router的配置如下

// 導(dǎo)入 pages 下的 Home.vue 
import index from './pages/index'
import test1 from './pages/test1'
import test2 from './pages/test2'
import test3 from './components/index/Header'

// 創(chuàng)建路由實(shí)例
const router = new VueRouter({
  routes:[
    {
        path: '/', component:index,
        children: [
            {
              path: 't', component:index.components.Tab,
              children: [
                {
                    path: 'test1',
                    component: test1
                },
                {
                    path: 'test2',
                    component: test2
                },
                {
                    path: 'test3',
                    component: test3
                }
              ]
            }
        ]
    }
]
})

router.beforeEach((to, from, next) => {
})

// 創(chuàng)建 Vue 實(shí)例*
new Vue({
  el: '#app',
  data(){
    return {
    }
  },
  components: {
    index
  },
  router, // 在vue實(shí)例配置中，用router
  /*watch: {
    // 監(jiān)視路由，參數(shù)為要目標(biāo)路由和當(dāng)前頁面的路由
    '$route' (to, from){
      const toDepth = to.path.substring(0, to.path.length-2).split('/').length
      // 官方給出的例子為 const toDepth = to.path.split('/').length 由于現(xiàn)在只有兩個(gè)路由路徑'/'和'/detail'
      // 按照官方給的例子，這兩個(gè)路由路徑深度都為 2 ，所以，這里稍作調(diào)整，不知道有什么不妥
      // 但目前在這個(gè)demo中能正常運(yùn)行，如果知道更好的方法，歡迎留言賜教
      const fromDepth = from.path.substring(0, from.path.length-2).split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide'
      // 根據(jù)路由深度，來判斷是該從右側(cè)進(jìn)入還是該從左側(cè)進(jìn)入
    }
  },*/
  created(){
    document.title=this.Global.appName;
  }
})

Tab.vue的代碼如下

<template>
    <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab" class="div">
        <el-tab-pane v-for="(item, index) in editableTabs2" :key="item.name" :label="item.title" :name="item.name" >
            <router-view></router-view>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    data() {
        return {
            editableTabsValue2: '2',
            editableTabs2: []
        }
    },
    methods: {
        addTab(name, url) {
            let tabs = this.editableTabs2;
            let flag = false;
            tabs.forEach((tab, index) => {
                if (tab.name === name) {
                    this.editableTabsValue2 = name;
                    flag = true;
                    return;
                }
            });
            if(flag){
                return;
            }
            tabs.push({
                title: name,
                name: name
            });
            this.editableTabsValue2 = name;
            this.$router.push(url);
        },
        removeTab(targetName) {
            let tabs = this.editableTabs2;
            let activeName = this.editableTabsValue2;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                        activeName = nextTab.name;
                        }
                    }
                });
            }
            this.editableTabsValue2 = activeName;
            this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
        }
    }
}
</script>

<style>
.div{
    height: 100%;
}
</style>

出來的效果如圖

不知道哪位大佬可以指點(diǎn)一下呢？