vue命名视图实现经典布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <script src="vue.js"></script> 10 <script src="vue-router.js"></script> 11 <style> 12 .header{ 13 background-color: orange; 14 height: 80px; 15 } 16 h1{ 17 margin: 0; 18 padding: 0 19 } 20 .container{ 21 display: flex; 22 flex: 2 23 } 24 .left{ 25 background-color: red; 26 height: 800px 27 } 28 .main{ 29 background-color: aqua; 30 flex: 8; 31 height: 800px 32 } 33 </style> 34 <body> 35 <div id="app"> 36 <router-view ></router-view> 37 <div class="container"> 38 <router-view name="left"></router-view> 39 <router-view name="main"></router-view> 40 </div> 41 </div> 42 <script> 43 var header={ 44 template:'<h1 class="header">头部区域</h1>' 45 } 46 var leftBox={ 47 template:'<h1 class="left">left区域</h1>' 48 } 49 var mainBox={ 50 template:'<h1 class="main">main区域</h1>' 51 } 52 var router=new VueRouter({ 53 routes:[ 54 { path: '/', components: { 55 'default':header, 56 'left':leftBox, 57 'main':mainBox 58 } 59 }, 60 61 ] 62 }) 63 var vm=new Vue({ 64 el:'#app', 65 data:{}, 66 methods: { 67 68 }, 69 router:router//将路由规则对象，注册到vm实例，用来监听URL地址的变化，然后展示对应的组件 70 }) 71 </script> 72 </body> 73 </html>