还是vue路由的问题？

Question

先贴上我的文件目录：

现在我的问题就是，页面最开始显示指向的是Main.vue，然后这个页面是挂载到根组件App.vue上面的：

Main.vue代码如下 :

<template>

<div class="main">
  <h1>主页面</h1>
  欢迎！<b @click="login">点击我登录</b>
</div>

</template>
<script type="text/ecmascript-6">

export default {
    data() {
        return {}
    },
  methods:{
      login(){
        this.$router.push('/login');
      }
  }
}

</script>

App.vue代码如下:

<template>
<div class="all">

<router-view></router-view>

</div>
</template>
<script>

export default {
  data(){
    return{}
  }
}

</script>

点击Main.vue里面的点击事件跳转到登录注册页面都没有问题，因为登录注册页面都是渲染到App.vue这个页面的router-view标签里面；问题在登录成功过后，我要点击左边的导航，在右边显示对应的内容，登录成功的代码如下：
<template>
<div id="app">

  <el-container style="border: 1px solid #b3c0d1;height: 625px;margin: 2px 2px 0 0">
      <el-aside style="width: 200px;background-color: rgb(238, 241, 246)">
          <el-row >
              <el-col :span="24">
                  <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select=handleSelect>
                      <el-submenu index="1">
                          <template slot="title"><i class="el-icon-message"></i>用户</template>
                          <el-menu-item index="1">用户信息</el-menu-item>
                      </el-submenu>
                      <el-submenu index="2">
                          <template slot="title"><i class="el-icon-menu"></i>积分</template>
                          <el-menu-item index="2">积分消费列表</el-menu-item>
                      </el-submenu>
                      <el-submenu index="3">
                          <template slot="title"><i class="el-icon-setting"></i>商品</template>
                          <el-menu-item index="3">商品列表</el-menu-item>
                      </el-submenu>
                      <el-submenu index="4">
                          <template slot="title"><i class="el-icon-date">订单</i></template>
                          <el-menu-item index="4">订单列表</el-menu-item>
                      </el-submenu>
                  </el-menu>
              </el-col>
          </el-row>
      </el-aside>
      <el-container>
          <el-header style="text-align: right;font-size: 17px">
              <el-dropdown>
                  <i class="el-icon-setting" style="cursor: pointer"></i>
                  <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>用户</el-dropdown-item>
                      <el-dropdown-item>基本信息</el-dropdown-item>
                      <el-dropdown-item divided @click="logout">退出</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
            <!--&nbsp;&nbsp;&nbsp; <a style="font-size: 13px;color: #4f28f6;" @click="logout">退出?</a>-->
              <span>你好!欢迎光临...</span>
          </el-header>
          <el-main>
              <div>
                  <h3>你好..........</h3>
                  <router-view></router-view>
              </div>
          </el-main>
          <el-footer style="text-align: center;font-size: 15px">
              你好,欢迎访问本网站  Copyright © 2014-2018 -owl-
          </el-footer>
      </el-container>
  </el-container>

</div>
</template>

<script>
export default {

  data(){
    return{}
  },
  methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      logout () {
          this.$router.push('/login')
      },
      handleSelect(key,keyPath){
          switch(key){
              case '1':
                  this.$router.push('/userList');
                break;
              case '2':
                  this.$router.push('/jifenList');
                break;
              case '3':
                  this.$router.push('/goodsList');
                break;
              case '4':
                  this.$router.push('/orderList');
                break;
          }
      }
  }

}
</script>

<style>
.el-header,.el-footer {

background-color: #B3C0D1;
color: #333;
line-height: 60px;

}
.el-aside {

color: #EEF1F6;

}
</style>

路由代码如下：
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../components/Main.vue'
import Login from '../components/Login.vue'
import ToRegist from '../components/regist.vue'
import Login_Succ from '../components/login_succ.vue'

import userList from '../components/manage/userlist.vue'
import jifenList from '../components/manage/jifenlist.vue'
import goodsList from '../components/manage/goodslist.vue'
import orderList from '../components/manage/orderlist.vue'

Vue.use(Router);

export default new Router({
routes: [

{
  path:'/',
  name:'Main',
  component:Main
},
{
  path:'/login',
  name:'ToLogin',
  component:Login
},
{
  path:'/toregist',
  name:'ToRegist',
  component:ToRegist
},
{
  path:'/login_succ',
  name:'Login_Succ',
  component:Login_Succ
},
{
  path:'/userList',
  name:'userList',
  component:userList
},
{
  path:'/jifenList',
  name:'jifenList',
  component:jifenList
},
{
  path:'/goodsList',
  name:'goodsList',
  component:goodsList
},
{
  path:'/orderList',
  name:'orderList',
  component:orderList
}

]
})

我需要在登录成功界面显示每个导航对应的页面，所以在el-main标签里面又写了一个router-view，代码如上，问题就出现在这里了，因为有两个router-view，登录成功的界面有一个，根组件App.vue有一个；现在我点击左边的导航页面是跳转了，但是并没有和我想象的渲染到登录成功里面的那个router-view，它依然是渲染到了App.vue这个页面，请问这是什么问题？

Answer 1

问题已解决，要用到嵌套路由，已经完成了我想要的结果