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标签进行动态切换，实现效果如图：

__EOF__

本文作者：是小李子哈
本文链接：https://www.cnblogs.com/lihongyun/p/15785712.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！