无法在 <router-view/> 中显示组件

Question

我对 Vue.cli 中的路由器有一些问题。我的英语是enter image description here 不好。但我提供了我的代码和图片。我想你会明白我遇到了什么问题。

我的路由器/index.js。

import innerView1 from '@/components/mainViews/innerView1'
import innerView2_1 from '@/components/mainViews/innerView2_1'
import innerView2_2 from '@/components/mainViews/innerView2_2'
import innerView3_1 from '@/components/mainViews/innerView3_1'
import innerView3_2 from '@/components/mainViews/innerView3_2'
import innerView4 from '@/components/mainViews/innerView4'


Vue.use(Router)

export default new Router({
  routes: [{
      path: '/Home',
      name:'Home',
      component: Home,
      children: [{
          path: '/innerView1',
          name: 'innerView1',
          component: innerView1
        },
        {
          path: 'innerView2',
          name: 'innerView2',
          children: [{
              path: '/innerView2_1',
              name: 'innerView2_1',
              component: innerView2_1
            },
            {
              path: '/innerView2_2',
              name: 'innerView2_2',
              component: innerView2_2
            }
          ]
        },
        {
          path: 'innerView3',
          name: 'innerView3',
          children: [{
              path: '/innerView3_1',
              name: 'innerView3_1',
              component: innerView3_1
            },
            {
              path: '/innerView3_2',
              name: 'innerView3_2',
              component: innerView3_2
            }
          ]
        },
        {
          path: '/innerView4',
          name: 'innerView4',
          component: innerView4
        }

      ]
    },
    {
      path: '/Login',
      name: 'Login',
      components: {
        default: Login

      }
    }

  ]
})

我的家.vue

  import Vue from 'vue';
  export default {
    name: "Home",
     beforeCreate() {
    },
    data() {
      return {
        test: "test",
        homeRoute:this.$router.options.routes[0],
        routes: this.$router.options.routes[0].children,
        router:this.$router

      };
    },
    mounted() {
      console.log(this);
    },
   
  };

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="217px">
        <el-container style="height: 500px; border: 1px solid #eee">
          <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu>
              <el-submenu v-for='(item) in routes' :key="item.name" v-if="item.children" :index='item.name' >
                <template slot="title" >
                  <i class="el-icon-message" ></i>{{item.name}}
                  </template>
                <el-menu-item v-for='(child,index) in item.children' :key='child.name' :index='item.name+index.toString()' @click="router.push(child.path)">
                    {{child.name}}
                </el-menu-item>
              </el-submenu>
              <el-menu-item v-else :key='item.name' :index='item.name' @click="router.push(item.path)" >
                {{item.name}}
              </el-menu-item>
            </el-menu>
          </el-aside>
        </el-container>
      </el-aside>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

The innerView1.vue can be showed

But the innerView2_1.vue can not be showed. And also innerView2_2,3_1,3_2.vue

The innerView4.vue can be showed

Answer 1

再添加一个 vue innerView2.vue 来包装 2_1 和 2_2 个 vue。

import innerView2 from '@/components/mainViews/innerView2'

path: 'innerView2',
          name: 'innerView2',
          component:innerView2,
          children: [{
              path: '/innerView2_1',
              name: 'innerView2_1',
              component: innerView2_1
            },
            {
              path: '/innerView2_2',
              name: 'innerView2_2',
              component: innerView2_2
            }
          ]
        }

并写在innerView2.vue中。

<template>
<router-view></router-view>
       
</template>

<script>
export default {
    name:'innerView2'
}
</script>