路由的命名视图

在VueRouter的实例中，如果需要一次展示多个组件的话，可以使用:

{ 
  path:'xx',
  components: {
       'default'(默认)：xxx(组件),
        'leftBox'(自定义命名): xx(组件名),
        xxx(自定义名)： xx(组件名),
  }
}

然后在<router-view>中的name属性上，就可以使用自定义名来控制了

<router-view></router-view> 默认显示的
<router-view name="leftBox"></router-view>  只显示名字为leftBox上的组件
<router-view name="rightBox"></router-view> 只显示名字为leftBox上的组件

 

<div id="app">
    <router-view></router-view>
    <router-view name="leftBox"></router-view>
    <router-view name="rightBox"></router-view>
</div>
<script>
    var header={
        template:'<h4>我是头部</h4>'
    }
    var left={
        template: '<p>我是左边</p>'
    }
    var right={
        template:'<p>我是右边</p>'
    }
    var rtobj=new VueRouter({
        routes:[
            {
                path:'/',
                components: {
                    'default':header,
                    'leftBox':left,
                    'rightBox':right
                }
            }
        ]
    })
    var vm=new Vue({
        el:"#app",
        router:rtobj
    })
</script>