第七章路由 78 路由-使用命名视图实现经典布局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
 8     <title>Document</title>
 9     <!--1.导入Vue的包-->
10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>  
11     <script src="../lib/vue-router-3.0.6.js"></script>  
12     <style>
13 
14       html,body{
15           margin: 0;
16           padding: 0;
17       }
18       .header{
19         background-color: orange;
20         height: 80px;
21       }
22 
23       h1{
24         margin: 0;
25         padding:0;
26         font-size: 16px;
27       }
28       
29       .container{
30         display: flex;
31         height: 600px;
32       }
33 
34       .left{
35         background-color: lightgreen;
36         flex: 2;
37       }
38       .main{
39         background-color: lightpink;
40         flex: 8;
41       }
42 
43     </style> 
44   </head>
45 
46   <body>
47       <div id="app">
48 
49       <router-view></router-view>
50       <div class="container">
51         <router-view name="left"></router-view>
52         <router-view name="main"></router-view>
53       </div>
54       </div>
55 
56       <script>
57 
58     var header={
59       template:'<h1 class="header">Header头部区域</h1>'
60     }
61 
62     var leftBox={
63       template:'<h1 class="left">Left侧边栏区域</h1>'
64     }
65 
66     var mainBox={
67       template:'<h1 class="main">mainBox主体区域</h1>'
68     }
69 
70     //创建路由对象
71     var router=new VueRouter({
72       routes:[
73     /*  {path:'/',component:header},
74       {path:'/left',component:leftBox},
75       {path:'/main',component:mainBox}*/
76 
77       {path:'/',components:{
78           'default':header,
79           'left':leftBox,
80           'main':mainBox
81           }
82         }      
83       ]
84     })
85 
86           //创建 Vue 实例，得到 ViewModel
87           var vm =  new Vue({
88               el:'#app',
89         data:{
90           msg:''
91         },
92         methods:{},
93         router
94           });
95       </script>
96   </body>
97 </html>

posted on 2019-06-12 15:52 songsong_p_blue 阅读(223) 评论(0) 收藏举报

第七章 路由 78 路由-使用命名视图实现经典布局

第七章路由 78 路由-使用命名视图实现经典布局