Vue学习之旅Part11：在Vue中通过vue-router实现命名视图

在用vue-router路由处理一些需求的时候 例如 有时需要同时同级展示多个组件 而不是嵌套展示
例如：创建一个布局 有侧导航和主内容两个视图 此时命名视图就派上用场了

在路由对象中 使用components属性 以使一个路径下可挂载多个子组件：
之后即可为每个要展示的组件指定一个名字
默认name为default 即 不设置名字

<script>
    var header={
        template:"<h1>头部</h1>"
    }
    var leftBox={
        template:"<h1>左侧边栏</h1>"
    }
    var mainBox={
        template:"<h1>主体</h1>"
    }

    // 创建路由对象
    var router=new VueRouter({
        routes:[
            // 使用components属性 一个路径下挂载多个子组件
            {path:"/",components:{
                // 默认展示的组件
                "default":header,
                // 为组件命名
                "left":leftBox,
                "main":mainBox
            }}
        ]
    })

    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{},
       // 挂载路由对象
       router
    });
</script>

然后 在页面中使用<router-view>标签进行展示 在标签上指定name
若指定了name 那么该<router-view>只能放指定name的组件

<div id="app">
	<!-- 不指定name 则使用默认(default)的组件 -->
	<router-view></router-view>
	<!-- 为<router-view>指定name 该<router-view>只能放指定name的组件 -->
	<router-view name="left"></router-view>
	<router-view name="main"></router-view>
</div>

---