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，就可以設定樣式了，這裡就不示範了。