11.动态标签页的一些优化和bug的解决

动态标签页有一些需要优化的地方和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.出现一个空白的标签

同上