1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../lib/js/vue.js"></script> 7 <script src="../lib/js/vue-router.js"></script> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .header{ 14 margin-bottom: 5px; 15 background-color: #204d74; 16 height: 80px; 17 } 18 .left{ 19 background-color: yellow; 20 margin-right: 10px; 21 300px; 22 height: 600px; 23 float: left; 24 } 25 .main{ 26 background-color: rebeccapurple; 27 790px; 28 height: 600px; 29 float: left; 30 } 31 </style> 32 </head> 33 <body> 34 <div id="app"> 35 <router-view></router-view> 36 <router-view name="left"></router-view> 37 <router-view name="main"></router-view> 38 </div> 39 <script> 40 const header = { 41 template:'<h1 class="header">头部区域</h1>' 42 }; 43 const leftBox = { 44 template:'<h1 class="left">左侧边栏区域</h1>' 45 }; 46 const mainBox = { 47 template:'<h1 class="main">主体区域</h1>' 48 }; 49 50 const routerObj = new VueRouter({ 51 routes:[ 52 { path:'/',components: { 53 'default':header, 54 'left':leftBox, 55 'main':mainBox 56 }} 57 ] 58 }); 59 60 const vm = new Vue({ 61 el:'#app', 62 data:{}, 63 methods:{}, 64 router:routerObj 65 }) 66 </script> 67 </body> 68 </html>