VueRouter -- 命名視圖 · Vue&&TypeSprict--基礎總結

>[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> ~~~