vue命名视图实现经典布局
vue命名视图实现经典布局
1 <!DOCTYPE html>
2 <html >
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 >
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>- 上一篇 »HTML经典页面布局，任何分辨率下，全屏显示？
- 下一篇 »CSS网站框架及样式命名规范