先看实例：
不同的组件出现在对应的位置

---

代码： Home.vue

<template>
    <div>
        <h1>HOME</h1>
        <router-view name="one" class="one"></router-view>
        <router-view name="two" class="two"></router-view>
    </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
}
</script>

<style lang="less" scoped>
.main{
    width: 60%;
    margin: 0 auto;
    border: 1px solid red;
}
.one{
    border: 1px solid red;
}
.two{
    border: 1px solid blue;
}
</style>

Son1.vue

<template>
    <div>
        <h1>Son1Component</h1>
        <!-- <h1>{{$store.state.obj.name}}</h1> -->
        <input type="text">
    </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
}
</script>

<style lang="less" scoped>
div{
    height: 1000px;
    background-color: aqua;
}
</style>

Son2.vue

<template>
    <div>
        <h1>Son2</h1>
        <input type="text"/>
    </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    }
}
</script>

<style lang="less" scoped>

</style>

route.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {path:'/',redirect:"/Son1"},
  {path:'/home',component:()=>import('../views/Home.vue'),children:[
    {path:"/Son1",components:{
      one:()=>import('../views/Son1.vue'),
      two:()=>import('../views/Son2.vue'),
    }},
  ]},  
]

const router = new VueRouter({
  routes
})

export default router

在组件中使用多个router-view时，router-view需要加上name属性。
在router.js中，compoents的key值必须与router-view的name属性一致。