你好
不知道说什么开头了，还是不说开头了。直接步入主题吧。
首先判断是否有tag，如果没有则默认隐藏
computed:{
showTags(){
return this.tagsList.length>0;
}
}
我的思路是监听route的变化状态，由此来去重添加到标签里
//tags.vue
watch: {
//监听路由
$route(newValue, oldValue) {
//当所有tags被删除，默认path为/，并清空tagsList
if(newValue.fullpath == "/"){
this.tagsList = [];
return;
}
//切换路由时，默认选中tag
this.tagsList.some(item => {
if (item.path === newValue.fullPath) {
this.tagName = item.path;
}
});
this.setTags(newValue);
},
添加到标签里首先得判断是否重复添加，所以得先判断一下是否当前跳转过去的路由是否在tagsList已存在
methods:{
setTags(route){
const isExit = this.tagsList.some(item => {
return item.path === route.fullPath;
});
}
}
如果跳转过去的路由在tagsList里面不存在的话即可添加
methods:{} 我就不写了
setTags(route){
const isExit = this.tagsList.some(item => {
return item.path === route.fullPath;
});
if(!isExit){
this.tagsList.push({
path: route.fullPath,
meta: route.meta,
name: route.name,
});
//获取路由路径，方便用户知道当前展示的是哪个界面
this.tagName = route.fullPath;
}
}
使用iview的tab组件绑定菜单
<template>
<div v-if="showTags">
<Tabs type="card" :value="tagName" @on-click="routerLink" @on-tab-remove="closeTags" closable>
<TabPane
v-for="item of tagsList"
:key="item.name"
:name="item.path"
:label="item.name"
></TabPane>
</Tabs>
</div>
</template>
给tab绑定点击跳转事件
//页面跳转
routerLink(name){
//name是获取到你当前点击的标签的name值
//跳转页面
this.$router.push({ path: name });
}
给tab绑定关闭界面
注意，关闭页面的时候得注意一下，如果是关闭当前选中的页面则要默认选中当前标签的最后一个标签
如果最后一个标签没有，则展示默认界面
//关闭页面
closeTags(name){
let _this = this;
_this.tagsList.forEach((item, index) => {
//删除对应的tag
if (item.path == name) {
_this.tagsList.splice(index, 1);
}
});
//关闭当前tag时 默认打开上一个tag
if (_this.tagName === name) {
if(_this.tagName.length>=1){
_this.tagName = _this.tagsList[_this.tagsList.length - 1].path;
}else{
//如果List的长度小于1 则代表关闭的是最后一个，默认展示初始界面
_this.tagName = "/"
}
}
}
最后附上完整代码和成品图
成品展示
<style scoped>
</style>
<template>
<div v-if="showTags">
<Tabs type="card" :value="tagName" @on-click="routerLink" @on-tab-remove="closeTags" closable>
<TabPane
v-for="item of tagsList"
:key="item.name"
:name="item.path"
:label="item.name"
></TabPane>
</Tabs>
</div>
</template>
<script scoped>
export default {
data() {
return {
tagsList: [],
tagName: ""
};
},
components: {},
watch: {
//监听路由
$route(newValue, oldValue) {
//当所有tags被删除，默认path为/
// if(newValue.fullpath == "/"){
// this.tagsList = [];
// return;
// }
//切换路由时，默认选中tag
this.tagsList.some(item => {
if (item.path === newValue.fullPath) {
this.tagName = item.path;
}
});
this.setTags(newValue);
},
//关闭tag时切换页面
tagName(newValue, oldValue) {
this.$router.push({ path: newValue });
}
},
methods: {
setTags(route) {
//路由变换时 去重
const isExit = this.tagsList.some(item => {
return item.path === route.fullPath;
});
//当没有重复的时候则添加
if (!isExit) {
this.tagsList.push({
path: route.fullPath,
meta: route.meta,
name: route.name
});
this.tagName = route.fullPath;
}
},
//页面跳转
routerLink(name) {
this.$router.push({ path: name });
},
//关闭tags
closeTags(name) {
let _this = this;
_this.tagsList.forEach((item, index) => {
//删除对应的tag
if (item.path == name) {
_this.tagsList.splice(index, 1);
}
});
//关闭当前tag时 默认打开上一个tag
if (_this.tagName === name) {
if(_this.tagName.length>=1){
_this.tagName = _this.tagsList[_this.tagsList.length - 1].path;
}else{
//如果List的长度小于1 则代表关闭的是最后一个，默认展示初始界面
_this.tagName = "/"
}
}
}
},
computed: {
//如果没有一个tag则隐藏tag
showTags() {
return this.tagsList.length > 0;
}
}
};
</script>
使用只需要将此组件引入父组件即可(还有一点小bug，就是没有使用keep-alive保存缓存，等之后我会补充的)
