动态标签页有一些需要优化的地方和bug
1.解决删除标签页,内容不会替换为上一个标签页
removeTab(targetName) {
if ( targetName === 'Index') {
console.log("首页不能被删除")
return;
}
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
//在删除方法里加上这一个路由的切换,当删除一个标签,就会路由到前一个标签
this.$router.push({name: nextTab.name});
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
},
tabClick(target) {
this.$router.push({name: target.name});
}
}
2.用户使用网址进入,没有标签
当用户使用网址进入时,可以看到页面,但是没有对应的标签
因为我这里是一个嵌套页面,归根结底还是app.vue
所以使用监听器
export default {
name: "App",
watch:{
$route(to,from){
if (to.path != '/login' && to.path != '/sys/Index' && to.path != '/'){
console.log("to")
console.log(to);
let obj = {
name: to.name,
title: to.meta.title,
}
this.$store.commit('addTab', obj);
}
}
}
3.用户退出,标签页不会被清空
调用方法将其清空
REMOVE_TOKEN: (state) => {
state.token = ''
localStorage.removeItem("token")
state.menuList = [];
state.authoritys = [];
state.validation = false;
state.editableTabsValue = 'Index';
state.editableTabs = [{
title: '首页',
name: 'Index'
}];
}
4.首页不能被删除
加一个判断
removeTab(targetName) {
if ( targetName === 'Index') {
console.log("首页不能被删除")
return;
}
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
this.$router.push({name: nextTab.name});
}
});
}
5.出现两个首页标签
这是因为监听器没有判断目标网页是不是首页
watch:{
$route(to,from){
if (to.path != '/login' && to.path != '/sys/Index' && to.path != '/'){
console.log("to")
console.log(to);
let obj = {
name: to.name,
title: to.meta.title,
}
this.$store.commit('addTab', obj);
}
}
}
6.出现一个空白的标签
同上