Vue+Element实现tab页多页面切换

1
2
3
4
5
6
https://gitee.com/marlife/nav-tags.git
已经上传到Gitee(码云)，代码拉下来之后：
1.执行安装命令：npm install
2.执行启动命令：npm run serve
3.访问：http://localhost:8090

1
2
3
4
5
6
1、首页的tag一开始就会存在，而且是不能进行删除的
2、当点击左侧栏的时候,如果tag没有该菜单名称则新增，
如果已经有了那么当前tag背景为蓝色。
3、删除当前tag，如果是最后一个tag，那么路由调整到它前面那个标签并且背景变蓝，如果不是最后一个那么路由调整到它后面那个标签并且背景变蓝。
4、还有要注意这个tag不论路由如何切换都是会存在的，所以这个tag一定要存在的home.vue中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
<template>

  <el-container class="home-container">

    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '230px'">
        <!-- 头部logo -->
        <template>
          <div class="header-title" v-if="!isCollapse">
            <img width="35px" height="35px" src="../assets/logo.png" style="border-radius: 5px">
            <span style="font-weight:bold">导航页切换示例</span>
          </div>
          <div class="header-title-hiddle" v-else>
             <img width="40px" height="40px" src="../assets/logo.png" style="border-radius: 5px">
          </div>
        </template>
        
        <!-- 菜单区域 -->
        <el-menu 
            background-color="#282C34" 
            text-color="#fff" 
            active-text-color="#fff"
            :collapse="isCollapse"
            :collapse-transition="false"
            :default-active="'/' + activePath"
            unique-opened
            router>
        
          <!-- 首页 -->
          <el-menu-item 
            :index="item.path" v-for="item in menuList" 
            :key="item.id"
            @click="selectMenu(item)">
            <i :class="item.class"></i>
            <span slot="title">{{item.label}}</span>
          </el-menu-item>

        </el-menu>
    </el-aside>

    <!-- 主体 -->
    <el-container>
      <!-- 头部 -->
      <el-header>
        
        <!-- 头部导航栏 -->
        <div class="header-row">
          <!-- 折叠 展开 和 名人名言 -->
          <div class="toggle-button">
            <div>
              <i :title="isCollapse ? '展开' : '收起'" class="fa fa-bars" @click="toggleCollapse"></i>
            </div>
            <div style="height:25px;width:100%;margin-left:10px">
              <div style="float:left;color:#E74405;font-size:16px;height:25px;line-height:25px;">
                <i class="fa fa-bullhorn"></i>
              </div>
              <el-carousel height="25px" direction="vertical" indicator-position="none" autoplay :interval="8000">
                
                <el-carousel-item v-for="item in mottoList" :key="item">
                  <h3 class="medium">{{ item }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>

          <!-- 头像下拉菜单 -->
          <div class="header-avatar">
            <div class="user">
              管理员，您好！
            </div>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <img width="35" height="35" style="border-radius:50%;background:#dddddd" src="../assets/images/index/user3.png" alt="">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="update-password">修改密码</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>

        <!-- tab标签页区域 - 用于标签页切换 -->
        <div class="tabs-switch-page">
          <el-tag
            size="medium"
            v-for="(tab, index) in tabList"
            :key="tab.name"
            @close="handleClose(tab, index)"
            @click="changeMenu(tab)"
            :closable="tab.name !== 'home'"
            :effect="activePath === tab.name ? 'dark' : 'plain'">
          {{tab.label}}
          </el-tag>
        </div>
        
      </el-header>

      <!-- 内容区 -->
      <el-main>
        <!-- 路由占位符，用于展示内容区的内容 -->
        <div style="padding:15px">
          <keep-alive :include="catch_components">
            <router-view />
          </keep-alive>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  components: {
  },
  //组件被创建
  created() {
    //加载菜单
    this.loadMenu();
  },
  computed: {
    ...mapState({ // 从 state 中的到的计算属性
       activePath: state => state.activePath, // 已选中菜单
       tabList: state => state.tabList,  // tags菜单列表
       catch_components: state => state.catch_components,  // keepalive缓存
    })
  },
  data() {
    return{
        //菜单列表
        menuList: [],
        // 折叠-展开 默认false不折叠 
        isCollapse: false,
        // 系统公告
        mottoList: [
            '等风来不如追风去，追逐的过程就是人生的意义',
            '当你想要放弃了，那就想想当初为什么开始',
            '自强之人谁也打不倒，自弃之人谁也带不动',
            '既然无法选择回去的路程，那么就清晰的面对已经造成的挑战',
            '在难过的时候，不要忘记自己还要前进',
            '人生能有几次搏？莫到白发还未博'
        ],
    }
  },
  methods: {
      // 右上角下拉菜单点击事件
    handleCommand(command){
      switch(command){
        // 退出
        case 'logout': 
            //消息提示
            this.msg.success('退出登录')
            //重置vuex中的数据
            this.$store.commit('clearVUEX')
            //跳转到首页
            this.$router.push("/index");
          break
        //修改密码
        case 'update-password':
          //消息提示
            this.msg.success('修改密码')
          break
      }
    },
    // 点击折叠 展开菜单
    toggleCollapse(){
        this.isCollapse = !this.isCollapse;
    },
    // 点击菜单 - 传入name，添加到keepalive缓存页面
    selectMenu(item){
        // 加入keepalive缓存
        this.$store.commit('addKeepAliveCache', item.name)
        //添加tags标签
        //访问wellcome 就代表home
        var name = item.name === 'wellcome' ? 'home' : item.name
        var submenu = {
          path: name,
          name: name,
          label: item.label
        }
        //修改选中菜单
        this.$store.commit('selectMenu', submenu)
    },
    // 关闭tab标签
    handleClose(tab, index) {
        // 历史选中菜单
        var oldActivePath = this.$store.state.activePath
        // 历史已选中菜单列表
        var oldTabList = this.$store.state.tabList
        // 计算标签个数
        let length = oldTabList.length - 1
        // 删除tabList中的该对象
        for(let i = 0;i < oldTabList.length;i++){
            let item = oldTabList[i]
            if(item.name === tab.name){
            oldTabList.splice(i, 1);
            }
        }
        // 删除keepAlive缓存
        this.$store.commit('removeKeepAliveCache', tab.name)
        // 如果关闭的标签不是当前路由的话，就不跳转
        if (tab.name !== oldActivePath) {
            return
        }
        // 如果length为1，必然只剩下首页标签，此时关闭后，更新到首页
        if(length === 1){
            // 同时存储菜单
            this.$store.commit('closeTab', {activePath: 'home', tabList: oldTabList})
            // tab页向左跳转
            this.$router.push({ name: oldTabList[index - 1].name })
            // 不再向下执行
            return
        }
        // 关闭的标签是最右边的话，往左边跳转一个
        if (index === length) {
            // 同时更新路径
            oldActivePath = oldTabList[index - 1].name
            // 同时存储菜单
            this.$store.commit('closeTab', {activePath:oldActivePath, tabList: oldTabList})
            // tab页向左跳转
            this.$router.push({ name: oldTabList[index - 1].name })
        } else {
            // 同时更新路径
            oldActivePath = oldTabList[index].name
            // 同时存储菜单
            this.$store.commit('closeTab', {activePath:oldActivePath, tabList: oldTabList})
            // tab页向右跳转
            this.$router.push({ name: oldTabList[index].name })
        }
    },
    // 点击标签跳转路由
    changeMenu(item) {
        // 历史选中菜单
        var oldActivePath = this.$store.state.activePath
        // 首先判断点击的是否是自己，如果是自己则return
        if(oldActivePath === item.name){
            return
        }
        // 不是自己，存储菜单
        this.$store.commit('changeMenu', item.name)
        // 页面跳转
        this.$router.push({ name: item.name })
    },
    //加载菜单
    loadMenu(){
        this.menuList = [
            {
                id: 'number-01', 
                class: 'fa el-icon-document', 
                path: '/home', 
                label: '控制台', 
                name: 'home'
            },
            {
                id: 'number-02', 
                class: 'fa el-icon-document', 
                path: '/test2', 
                label: '测试页面2', 
                name: 'test2'
            },
            {
                id: 'number-03', 
                class: 'fa el-icon-document', 
                path: '/test3', 
                label: '测试页面3', 
                name: 'test3'
            },
            {
                id: 'number-04', 
                class: 'fa el-icon-document', 
                path: '/test4', 
                label: '测试页面4', 
                name: 'test4'
            },
            {
                id: 'number-05', 
                class: 'fa el-icon-document', 
                path: '/test5', 
                label: '测试页面5', 
                name: 'test5'
            },
            {
                id: 'number-06', 
                class: 'fa el-icon-document', 
                path: '/test6', 
                label: '测试页面6', 
                name: 'test6'
            },
            {
                id: 'number-07', 
                class: 'fa el-icon-document', 
                path: '/test7', 
                label: '测试页面7', 
                name: 'test7'
            },
        ]
    }
  },
};
</script>
<style lang="less" scoped>
.el-col-align-middle{
    line-height: 40px;
    text-align: left;
    font-size: 14px;
}
.home-container{
  height: 100%;
}
.el-header{
  color: rgb(0, 0, 0);
  font-size: 20px;
  border-bottom: 1px solid #dddddd;
  height: 103px !important;
  padding: 0;
  background: #fff;
}
.header-row{
  height:60px;
  width:100%;
  display: flex;
  flex-direction:row;
  justify-content: center;
  border-bottom:1px solid #dddddd;
  overflow: hidden;
}
.header-avatar{
  float:right;
  width:40%;
  display: flex;
  align-items: center;
  justify-content:flex-end;
  padding-right:20px;
  .user{
    font-size: 14px;
    font-weight: bold;
    padding: 0 10px;
  }
}

.el-aside{
  background-color: #282C34;
  .header-title{
    padding-left: 10px;
    height: 60px;
    font-weight: 300;
    display: flex;
    font-size: 20px;
    align-items: center;
    cursor: pointer;
    color: #ffffff;
    span{
      margin-left: 10px;
    }
  }
  .header-title-hiddle{
    width: 64px;
    height: 60px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
  }
  .el-menu{
    border-right: none;
  }
}
// 菜单选中背景色
.el-menu-item.is-active{
  background-color: #1890FF !important;
}
// 菜单悬浮背景色
.el-menu-item:hover{
  background-color: #1890FF !important;
}
// 走马灯
.el-carousel__item h3 {
  color: #ee7c12;
  font-size: 14px;
  opacity: 0.75;
  line-height: 25px;
  margin: 0;
}

.el-main{
  background-color: #eaedf1;
  padding: 0;
}

.fa{
  margin-right: 10px;
}

// 点击展开/折叠按钮
.toggle-button{
  width: 80%;
  font-size: 20px;
  line-height: 40px;
  color:#595959;
  text-align: left;
  display: flex;
  align-items: center;
  float:left;
  padding-left: 20px;
  i{
    cursor: pointer;
  }
}
// 面包屑导航
.el-breadcrumb{
  margin-bottom: 0;
}

// tab页
.tabs-switch-page{
  display: flex;
  align-items:center;
  height: 40px;
  background-color:#fff;
  overflow: hidden;
}
.el-tag{
  cursor: pointer;
  margin-left: 10px;
  border-radius: 2px;
  font-size: 12px;
  color: #1890FF;
  border-color: #1890FF;
}
.el-tag--dark{
  color: #fff;
  background-color: #1890FF;
}

.el-dropdown-link {
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.submit-row{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    // 共享状态（即变量）
    state:{
        // 缓存组件页面
        catch_components: [],
        // 全局请求后台URL
        baseURL: 'http://localhost:8080',
        // 当前选中的菜单 - 默认选择首页
        activePath: 'home',
        // 菜单项 - 默认包含首页
        tabList: [
            {path: 'home', label: '控制台', name: 'home'}
        ]
    },
    // 更改vuex的store中状态的唯一方法 - 同步操作
    mutations: {
        //清空vuex数据
        clearVUEX(state){
            state.catch_components = []
            state.activePath = 'home'
            state.tabList = [
                {path: 'home', label: '控制台', name: 'home'}
            ]
        },
        // 跳转页面执行
        selectMenu(state, submenu) {
            // 首页就是 wellcome   也就是 home
            if(submenu.name === 'wellcome' || submenu.name === 'home'){
                submenu.name = 'home'
                submenu.path = 'home'
            }
            // 当前选中菜单
            var activePath = submenu.name
            // 历史已选中菜单列表
            var oldTabList = state.tabList
            // 将菜单信息添加到tablist - 添加时判断是否已有该标签
            var result = oldTabList.some(item => {
                if(item.name === activePath){
                    return true 
                } 
            })
            // 如果不包含该对象，则添加
            if(!result){
                oldTabList.push({
                    path: submenu.name,
                    name: submenu.name,
                    label: submenu.label
                })
            }
            // 重新赋值
            state.activePath = activePath
            state.tabList = oldTabList
        },
        // 添加keepalive缓存
        addKeepAliveCache(state, val){
            // 如果是首页不缓存
            if(val === 'wellcome' || val === 'home'){
                return
            }
            // 添加时判断，如果该组件已存在，则不添加
            if(state.catch_components.indexOf(val) === -1) {
                // 不存在，缓存页面
                state.catch_components.push(val)
            }
        },
        // 删除keepalive缓存
        removeKeepAliveCache(state, val){
            let cache = state.catch_components
            for(let i = 0;i < cache.length;i++){
              if(cache[i] === val){
                  cache.splice(i, 1);
              }
            }
            state.catch_components = cache
        },
        //关闭菜单
        closeTab(state, val) {
            // 重新赋值
            state.activePath = val.activePath
            state.tabList = val.tabList
        },
        // 点击标签选择菜单
        changeMenu(state, val) {
            state.activePath = val
        }
    },
    // 和mutations类似，异步操作
    Action: {

    }
})

export default store

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'app',
  // 防止数据丢失
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
      sessionStorage.setItem("store", JSON.stringify(this.$store.state))
    })
  }
}
</script>
<style>
</style>