vue中路由的命名视图实现经典布局

就是通过vue-router将组件渲染到页面中

1. 定义页面模板对象

var header={template:'<p>header</p>'}
var left={template:'<p>left</p>'}
var main={template:'<p>main</p>'}
           

1. 定义路由对象，注册到Vue实例中

var router=new VueRouter({
    routes:[
        {path:'/',
        components:{
            'header':header,
            'left':left,
            'main':main
        }}
    ]
})
var vm=new Vue({
    el:'#app',
    data:{},
    methods:{},
    router:router
})
           

1. 页面中设置router-view

<div id="app">
        <router-view name="header"></router-view>
        <router-view name="left"></router-view>
        <router-view name="main"></router-view>
</div>
           

当router-view的name属性有值时，会自动到components中寻找对应的路由，没有值，则寻找component中的路由或components中的default下的路由

1. 设置样式

   使用div将各个router-view包裹起来，加上class，就可以设置样式了，这里就不演示了。