经典布局：上、左、右
html代码结构
<div id="app"> <router-view></router-view> <div class="contain"> <router-view name="left"></router-view> <router-view name="main"></router-view> </div> </div>
在路由中的components中可以设置组件对象，其中属性名为router-view占位符中的name值，属性值为组件名称
var router = new VueRouter({
routes: [{path: '/', components: {
default: header,
left: leftBox,
'main': mainBox
}}]
})
页面样式使用flex布局
<style> .header{ background-color: orange; height: 200px; } .contain{ display: flex; height: 600px; } .left{ background-color: lightgray; flex: 2; } .main{ background-color: lightcoral; flex: 8; } html, body, h1{ margin: 0; padding: 0; font-size: 16px; } </style>
整体代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <style> .header{ background-color: orange; height: 200px; } .contain{ display: flex; height: 600px; } .left{ background-color: lightgray; flex: 2; } .main{ background-color: lightcoral; flex: 8; } html, body, h1{ margin: 0; padding: 0; font-size: 16px; } </style> </head> <body> <div id="app"> <router-view></router-view> <div class="contain"> <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">这是main</h1>' } var router = new VueRouter({ routes: [{path: '/', components: { default: header, left: leftBox, 'main': mainBox }}] }) var vm = new Vue({ el: '#app', data: {}, methods: {}, router: router }) </script> </body> </html>
页面如图：
