vue2.0动态路由相关
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 <!-- <script src="https://unpkg.com/vue@next"></script> -->
7 <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
8 <style>
9 [v-cloak] {
10 display: none;
11 }
12
13 .tab-wrap {
14 width: 100%
15 }
16
17 .tab-wrap .tab,
18 .classify-tab {
19 display: inline-block;
20 padding: 5px 10px;
21 border: 1px solid #EFEFEF;
22 margin-right: 5px;
23 font-size: 14px;
24 }
25
26 .tab-wrap .tab.active,
27 .classify-tab.active {
28 background-color: #0000FF;
29 color: #FFFFFF;
30 }
31
32 .main {
33 border: 1px solid #EFEFEF;
34 padding: 10px;
35 }
36 </style>
37 </head>
38 <body>
39 <div id="app" v-cloak>
40
41 </div>
42 <script>
43 // 菜品详情
44 let detailComponent = {
45 template: `
46 <div class='main'>菜品详情</div>
47 `
48 }
49
50 // 会员登录
51 let loginComponent = {
52 template: `
53 <div class=main>
54 <input type='text'><button type='button'>登录</button>
55 </div>
56 `
57
58 }
59
60 // 菜品分类
61 let classifyComponent = {
62 data() {
63 return {
64 classifys: [
65 // 这里默认羊肉串是选中的状态
66 {
67 id: 1,
68 title: '羊肉串',
69 active: true
70 },
71 {
72 id: 2,
73 title: '啤酒',
74 active: false
75 },
76 {
77 id: 3,
78 title: '馒头片',
79 active: false
80 }
81 ]
82 }
83 },
84 template: `
85 <div class=main>
86 <div :class="{'classify-tab':true,active:item.active}" v-for="(item,index) in classifys" :key='item.id'
87 @click='selectClassify(index)'>{{item.title}}</div>
88 </div>
89 `,
90 methods: {
91 selectClassify(index) {
92 // 优化，减少循环的次数。
93 for (let i = 0; i < this.classifys.length; i++) {
94 if (this.classifys[i].active) {
95 this.classifys[i].active = false;
96 break;
97 }
98 }
99 this.classifys[index].active = true;
100 this.$set(this.classifys, index, this.classifys[index])
101 }
102 }
103
104
105 }
106
107 new Vue({
108 el: '#app',
109
110 data() {
111 return {
112 tabs: [{
113 title: "菜品详情",
114 active: true,
115 componentName: "detail-component"
116 },
117 {
118 title: "会员登录",
119 active: false,
120 componentName: "login-component"
121 },
122 {
123 title: "菜品分类",
124 active: false,
125 componentName: "classify-component"
126 }
127 ],
128 currentComponent:'detail-component'
129 }
130 },
131
132 methods: {
133 selectTab(index,componentName) {
134 for (let i = 0; i < this.tabs.length; i++) {
135 if (this.tabs[i].active) {
136 this.tabs[i].active = false;
137 break;
138 }
139 }
140 this.tabs[index].active = true;
141 this.$set(this.tabs, index, this.tabs[index])
142 this.currentComponent=componentName;
143 }
144 },
145 components: {
146 detailComponent,
147 loginComponent,
148 classifyComponent
149 },
150 template: `
151 <div>
152 <div class='tab-wrap'>
153 <div :class="{tab:true,active:item.active}" v-for="(item,index) in tabs" :key='index'
154 @click=selectTab(index,item.componentName)>{{item.title}}</div>
155 <!-- <detail-component v-if="currentComponent=='detail-component'"></detail-component> -->
156 <!-- <login-component v-if="currentComponent=='login-component'"></login-component> -->
157 <!-- <classify-component v-if="currentComponent=='classify-component'"></classify-component> -->
158 <!-- 下面的写法就是动态路由的写法，is属性的含义是：由于受html语法限制，ul、table、select等元素只能包涵特定的子元素
159 所以这里用is可以将自定义的元素放入到想要放入的元素中。还有这里的keep-alive的作用是缓存的上一次操作的结果，等下次再回到上次的页面时，会依然保持上次操作的结果。-->
160 <keep-alive>
161 <component :is='currentComponent'></component>
162 </keep-alive>
163
164 </div>
165 </div>
166 `
167
168 })
169 </script>
170 </body>
171 </html>
开箱即用，可根据tab标签进行动态切换，实现效果如图：
努力学习，天天向上，向阳而生的可爱小北鼻。
