還是vue路由的問題？

先貼上我的文件目錄：

現(xiàn)在我的問題就是，頁面最開始顯示指向的是Main.vue，然后這個(gè)頁面是掛載到根組件App.vue上面的：

Main.vue代碼如下 :

<div class="main">
  <h1>主頁面</h1>
  歡迎！<b @click="login">點(diǎn)擊我登錄</b>
</div>

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

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

</script>

App.vue代碼如下:

<router-view></router-view>

</div>
</template>
<script>

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

</script>

點(diǎn)擊Main.vue里面的點(diǎn)擊事件跳轉(zhuǎn)到登錄注冊(cè)頁面都沒有問題，因?yàn)榈卿涀?cè)頁面都是渲染到App.vue這個(gè)頁面的router-view標(biāo)簽里面；問題在登錄成功過后，我要點(diǎn)擊左邊的導(dǎo)航，在右邊顯示對(duì)應(yīng)的內(nèi)容，登錄成功的代碼如下：
<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">積分消費(fèi)列表</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">
              你好,歡迎訪問本網(wǎng)站  Copyright ? 2014-2018 -owl-
          </el-footer>
      </el-container>
  </el-container>

</div>
</template>

  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>

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
}

]
})

我需要在登錄成功界面顯示每個(gè)導(dǎo)航對(duì)應(yīng)的頁面，所以在el-main標(biāo)簽里面又寫了一個(gè)router-view，代碼如上，問題就出現(xiàn)在這里了，因?yàn)橛袃蓚€(gè)router-view，登錄成功的界面有一個(gè)，根組件App.vue有一個(gè)；現(xiàn)在我點(diǎn)擊左邊的導(dǎo)航頁面是跳轉(zhuǎn)了，但是并沒有和我想象的渲染到登錄成功里面的那個(gè)router-view，它依然是渲染到了App.vue這個(gè)頁面，請(qǐng)問這是什么問題？

回答

編輯回答