paste my file directory first:

now my problem is that the page is initially displayed to point to Main.vue, and then the page is mounted to the root component App.vue:

the Main.vue code is as follows:

< 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 >

the App.vue code is as follows:

< template >
< div class= "all" >

<router-view></router-view>

< / div >
< / template >
< script >

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

< / script >

Click the click event in Main.vue to jump to the login registration page, because the login registration page is rendered to the router-view tag of the App.vue page. After the login is successful, I need to click on the navigation on the left and display the corresponding content on the right. The code for successful login is as follows:
< template >
< div id= "app" >

  <el-container style="border: 1px solid -sharpb3c0d1;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>
            <!-- <a style="font-size: 13px;color: -sharp4f28f6;" @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: -sharpB3C0D1;
color: -sharp333;
line-height: 60px;

}
.el-aside {

color: -sharpEEF1F6;

}
< / style >

the routing code is as follows:
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
}

]
})

I need to display the corresponding page for each navigation in the login success interface, so write another router-view, code in the el-main tag as above, and the problem is here, because there are two successful router-view, login interfaces and one for the root component App.vue. Now I click on the navigation page on the left to jump, but I did not imagine rendering to the login success inside the router-view, it is still rendered to the App.vue page, what is the problem?