Vue路由-命名檢視實現經典佈局
阿新 • • 發佈：2018-11-05
Vue路由-命名檢視實現經典佈局
相關Html:
<!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>