>[success] # 命名视图 ~~~ 1.一个页面放置多个视图 2.视图对象连接对应多个组件形成一个页面多个视图组件 ~~~ >[danger] ##### 经典布局 ![](https://box.kancloud.cn/391dcbef13c177756f4865f5063a366c_1348x630.png) ~~~ --: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-router-3.0.1.js"></script> <style> html, body { margin: 0; padding: 0; } .header { background-color: orange; height: 80px; } h1 { margin: 0; padding: 0; font-size: 16px; } .container { display: flex; height: 600px; } .left { background-color: lightgreen; flex: 2; } .main { background-color: lightpink; flex: 8; } </style> </head> <body> <div id="app"> <router-view></router-view> <div class="container"> <router-view name="left"></router-view> <router-view name="main"></router-view> </div> </div> <script> var header = { template: '<h1 class="header">Header头部区域</h1>' } var leftBox = { template: '<h1 class="left">Left侧边栏区域</h1>' } var mainBox = { template: '<h1 class="main">mainBox主体区域</h1>' } // 创建路由对象 var router = new VueRouter({ routes: [ /* { path: '/', component: header }, { path: '/left', component: leftBox }, { path: '/main', component: mainBox } */ { path: '/', components: { 'default': header, 'left': leftBox, 'main': mainBox } } ] }) // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, router }); </script> </body> </html> ~~~