Vue系列之 => 命名檢視實現經典佈局
阿新 • • 發佈：2019-01-03
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 7 <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" /> 8 <title>管理後臺</title> 9<script src="../lib/jquery2.1.4.min.js"></script> 10 <script src="../lib/Vue2.5.17.js"></script> 11 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 12 <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> 13<!-- 最新版本的 Bootstrap 核心 CSS 檔案 --> 14 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 15 crossorigin="anonymous"> 16 </head> 17<style> 18 html,body { 19 margin: 0; 20 padding:0; 21 } 22 .header { 23 background-color: orange; 24 height: 80px; 25 } 26 27 .container { 28 width:100%; 29 display: flex; 30 height: 400px; 31 padding: 0; 32 margin: 0; 33 } 34 35 .left { 36 background-color: pink; 37 flex: 2; 38 } 39 40 .right { 41 background-color: bisque; 42 flex: 8; 43 } 44 </style> 45 46 <body> 47 <div id="app"> 48 <router-view></router-view> 49 <div class="container"> 50 <router-view name="left"></router-view> 51 <router-view name="right"></router-view> 52 </div> 53 </div> 54 55 <!-- 元件 --> 56 <template id="header"> 57 <div class="header"> 58 <h1>header</h1> 59 </div> 60 </template> 61 <template id="left"> 62 <div class="left"> 63 <h1>left</h1> 64 </div> 65 </template> 66 <template id="right"> 67 <div class="right"> 68 <h1>Right</h1> 69 </div> 70 </template> 71 72 <script> 73 // 建立元件 74 var header = { 75 template: '#header' 76 }; 77 var left = { 78 template: '#left' 79 }; 80 var right = { 81 template: '#right' 82 }; 83 84 // 建立路由物件 85 var routerObj = new VueRouter({ 86 routes: [ 87 // { path : '/' , component : header }, 88 // { path : '/left' , component : left}, 89 // { path : '/right' , component : right} 90 { 91 path: '/', 92 components: { 93 'default': header, 94 'left': left, 95 'right': right 96 } 97 } 98 ] 99 }); 100 101 var vm = new Vue({ 102 el: '#app', 103 data: {}, 104 methods: { 105 106 }, 107 router: routerObj 108 109 }); 110 </script> 111 </body> 112 113 </html>
