vue-router多个组件模板放入同一个页面中

红色框为增改部分！！！

 效果：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const first = {template:'<div>这是first内容</div>'}
const second = {template:'<div>这是second内容</div>'}
const Home = {template:'<div>这是Home内容</div>'}
const Home2 = {template:'<div>这是Home2222内容</div>'}

const firstFirst = {template:'<div>这是firstFirst内容 {{ $route.params.id }} </div>'}
const firstSecond = {template:'<div>这是firstSecond内容 {{ $route.params.id }}</div>'}
const sld={
    template:`
    <div class="sld">
        <h2>二级组件</h2>
        <router-view class="abc"></router-view>
    </div>
`
}

const router = new VueRouter({
    mode:"history",
    base:__dirname,
    routes:[
        {path:"/",name:"Home",components:{
            default:Home,
            left:first,
            right:second
        }},
        {path:"/first",component:sld,
            children:[
                {path:"/",name:"Home-first",component:first},
                {path:"first",name:"Home-first-first",component:firstFirst},
                {path:"second",name:"Home-first-second",component:firstSecond}
            ]
        },
        {path:"/second",name:"Home-second",components:{
            default:Home2,
            left:first,
            right:second

        }}
    ]
})

new Vue({
    router,
    template:`
        <div id="r">
        <p>{{$route.name}}</p>
            <ul>
                <li><router-link to="/">/</router-link></li>
                <li><router-link to="/first">first</router-link>
                    <ul>
                        <li><router-link :to="{name:'Home-first-first',params:{id:111111}}">first</router-link></li>
                        <li><router-link :to="{name:'Home-first-second',params:{id:222222}}">second</router-link></li>
                    </ul>
                </li>
                <li><router-link to="/second">second</router-link></li>
            </ul>
            <router-view class="abc"></router-view>
            <router-view class="abc" name="left" style="float:left;50%;height:300px;background:#1E88DA"></router-view>
            <router-view class="abc" name="right" style="float:right;50%;height:300px;background:#ff0000"></router-view>
        </div>
    `
}).$mount("#app")