Day4.9路由-命名视图实现经典布局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../lib/js/vue.js"></script>
 7     <script src="../lib/js/vue-router.js"></script>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         .header{
14             margin-bottom: 5px;
15             background-color: #204d74;
16             height: 80px;
17         }
18         .left{
19             background-color: yellow;
20             margin-right: 10px;
21             width: 300px;
22             height: 600px;
23             float: left;
24         }
25         .main{
26             background-color: rebeccapurple;
27             width: 790px;
28             height: 600px;
29             float: left;
30         }
31     </style>
32 </head>
33 <body>
34 <div id="app">
35     <router-view></router-view>
36     <router-view name="left"></router-view>
37     <router-view name="main"></router-view>
38 </div>
39 <script>
40     const header = {
41         template:'<h1 class="header">头部区域</h1>'
42     };
43     const leftBox = {
44         template:'<h1 class="left">左侧边栏区域</h1>'
45     };
46     const mainBox = {
47         template:'<h1 class="main">主体区域</h1>'
48     };
49 
50     const routerObj = new VueRouter({
51         routes:[
52             { path:'/',components: {
53                 'default':header,
54                 'left':leftBox,
55                 'main':mainBox
56                 }}
57         ]
58     });
59 
60     const vm = new Vue({
61         el:'#app',
62         data:{},
63         methods:{},
64         router:routerObj
65     })
66 </script>
67 </body>
68 </html>
Day4.9路由-命名视图实现经典布局

猜你喜欢
