router-view多层嵌套路由，没有效果

Question

初学vue.js，想使用vue.js搭建一个后台管理的框架，其中使用到Vue Router，使用到嵌套路由，但是router-view的内容并没有显示，以下是我的组件的结构

main.js仲，router的配置如下

// 导入 pages 下的 Home.vue 
import index from './pages/index'
import test1 from './pages/test1'
import test2 from './pages/test2'
import test3 from './components/index/Header'

// 创建路由实例
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) => {
})

// 创建 Vue 实例*
new Vue({
  el: '#app',
  data(){
    return {
    }
  },
  components: {
    index
  },
  router, // 在vue实例配置中，用router
  /*watch: {
    // 监视路由，参数为要目标路由和当前页面的路由
    '$route' (to, from){
      const toDepth = to.path.substring(0, to.path.length-2).split('/').length
      // 官方给出的例子为 const toDepth = to.path.split('/').length 由于现在只有两个路由路径'/'和'/detail'
      // 按照官方给的例子，这两个路由路径深度都为 2 ，所以，这里稍作调整，不知道有什么不妥
      // 但目前在这个demo中能正常运行，如果知道更好的方法，欢迎留言赐教
      const fromDepth = from.path.substring(0, from.path.length-2).split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide'
      // 根据路由深度，来判断是该从右侧进入还是该从左侧进入
    }
  },*/
  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>

出来的效果如图

不知道哪位大佬可以指点一下呢？

Answer 1

这里你要让你的路由链继续往下走

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

Answer 2

Anybody help me?