一.想要实现的效果
- 当前路由切换,跟着改变
- 重复路由不再添加
- 删除当前标签，自动返回上一个标签
- 剩下最后标签无法删除
效果图如下
效果图
二.实现步骤
- 1.在vuex中存放标签页数组
- 2.切换路由,添加不重复的标签
- 3.点击删除图标,删除标签
具体代码如下 tags.js
export default{
state:{
visitedviews:[],//存放所有浏览过的且不重复的路由数据
},
mutations:{
// 添加标签，重复不添加
ADD_VISITED_VIEWS:(state,view)=>{
if(state.visitedviews.some(v=>v.path===view.path)) return;
state.visitedviews.push({
name:view.name,
path:view.path
})
},
// 删除(关闭)标签
DEL_VISITED_VIEWS:(state,view)=>{
state.visitedviews.forEach(item=> {
if(item.path==view.path){
state.visitedviews.splice(state.visitedviews.indexOf(item),1);
}
})
}
},
actions:{
addVisitedViews({commit},view){
commit('ADD_VISITED_VIEWS',view)
},
delVisitedViews({commit,state},view){
return new Promise(resolve=>{//删除后，需要重新刷新路由，使用resolve
commit('DEL_VISITED_VIEWS',view);
resolve([...state.visitedviews])
})
}
}
}
页面渲染 menu.vue
<!-- 类似浏览器标签页导航 -->
<template>
<div class="tags">
<router-link class="tab" :to="item.path" v-for="(item,index) in visitedViews" :key="index">
<el-button :type="item.name==$route.name?'primary':''" size="mini">
{{item.name}}
<span v-if="visitedViews.length!=1" class='el-icon-close' @click.prevent.stop="closeTags(item)"></span>
</el-button>
</router-link>
</div>
</template>
<script>
export default {
data () {
return {
};
},
components: {},
computed: {
visitedViews(){//store中取值
return this.$store.state.tags.visitedviews
}
},
watch:{
$route(to,from){
this.$store.dispatch('addVisitedViews',this.$route)
}
},
methods: {
//关闭标签页
closeTags(item){
this.$store.dispatch('delVisitedViews',item).then(res=>{
if(item.name==this.$route.name){//关闭当前页时，返回上一个历史页面
this.$router.push(res[res.length-1].path);
}
})
}
},
created(){//设置默认标签页
this.$store.dispatch('addVisitedViews',this.$route)
}
}
</script>
<style lang='scss' scoped>
.tags{
background-color: #fff;
padding: 10px 20px;
box-sizing: border-box;
display: flex;
}
.tab{
margin-right: 10px;
}
</style>
