elementUI显示标签页功能

思路:
1、在vuex中存储点击过的标签页
2、当路由刷新时,将路由添加到vuex中,并判断当前路由是否已经再标签页列表中
3、关闭标签页时,将vuex中的路由删除

代码:
vuex中保存点击过的路由列表,新建tagsPages.js文件

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
const tagsPages= {

state:{
//路由列表
tagsPages:[]
},

mutations:{

//添加路由
ADD_PAGE(state,page){
//判断路由是否已经在列表中,如果存在,不再添加到列表中
if(state.tagsPages.some(item=>item.path == page.path))
return;
//添加路由到列表中
state.tagsPages.push({
name: page.name,
title: page.meta.title,
path: page.path
})
},
//删除路由
DEL_PAGE(state,page){

for(let[i,p] of state.tagsPages.entries()){
if(p.path == page.path){
state.tagsPages.splice(i,1)
break
}
}
}
},

actions:{

//添加路由
addPage({commit},page){
commit("ADD_PAGE",page)
},

//删除路由
delPage({commit, state },page){

return new Promise((resolve) => {
commit("DEL_PAGE",page)
resolve([...state.tagsPages])
})

}

}

}
export default tagsPages

添加到vuex中

1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue'
import Vuex from 'vuex'
import tagsPages from './tagsPages'

Vue.use(Vuex)

const store= new Vuex.Store({
modules:{
tagsPages
}
})

export default store

标签页组件tagsPage.vue,没有写css样式

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
<template>
<div>
<el-scrollbar
ref="scrollContainer"
:vertical="false"
>
<router-link
v-for="tag in tagsPages"
ref="tag"
:to="{ path: tag.path}"
:key="tag.path"
tag="span"
>
<span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
{{ tag.title }}
</router-link>
</el-scrollbar>
</div>
</template>
<script>
export default {
data() {
return {
left: 0
};
},
computed: {
tagsPages() {
//从store中获取点击过的路由列表
return this.$store.state.tagsPages.tagsPages ;
}
},
watch: {
//当路由改变时,添加路由到路由列表
$route() {
this.addTagsPage();
}
},
methods: {
addTagsPage() {
//路由改变时执行的方法
if (this.$route.name) {
const route = this.$route;
this.$store.dispatch("addPage", route);
}
},
//关闭标签页
closeSelectedTag(view) {
this.$store.dispatch("delPage", view).then(visitedViews => {

//判断关闭的标签页是不是当前页
//如果是当前页,则判断路由列表中是否还存在路由
//如果存在则跳转到到最后打开的页面
//如果不存在则跳转到首页
if (view.path == this.$route.path) {
const latestView = visitedViews.slice(-1)[0];
if (latestView) {
this.$router.push(latestView);
} else {
this.$router.push("/");
}
}
});
}
}
};
</script>

-------------本文结束感谢您的阅读-------------