Vue开发实例（十）Tabs标签页打开、关闭与路由之间的关系

创建标签页

一、创建标签页
二、点击菜单展示新标签页
- 1、将标签数据作为全局使用
- 2、菜单点击增加标签页
- 3、处理重复标签
- 4、关闭标签页
三、点击标签页操作
- 问题1：点击标签页选中菜单进行高亮展示
- 问题2：点击标签页路由也要跳转
四、解决bug

先展示最终效果
在这里插入图片描述

一、创建标签页

创建一个Tabs/index.vue页面

<template>
  <div>
    <el-tabs v-model="editableTabsValue" type="card" closable>
      <el-tab-pane
        :key="item.name"
        v-for="item in editableTabs"
        :label="item.title"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "Tabss",
  data() {
    return {
      editableTabsValue: "1",
      editableTabs: [
        {
          title: "首页",
          name: "1",
          content: "首页",
        },
        {
          title: "Tab 1",
          name: "2",
          content: "Tab 1 content",
        },
        {
          title: "Tab 2",
          name: "3",
          content: "Tab 2 content",
        },
      ],
      tabIndex: 1,
    };
  },
};
</script>

<style scoped>
div{
  height: auto;
}
</style>

修改Index.vue页面，在页面的路由锚点 router-view上方引入此页面

页面效果

二、点击菜单展示新标签页

1、将标签数据作为全局使用

（1）将数据放到store.js中，作为全局

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './module/moduleA.js';
import moduleB from './module/moduleB.js';

Vue.use(Vuex)

const state = {
  username: '牛牛',
  userState: 0,
  menu_data: [],
  isLoadRoute: false,
  editableTabsValue: '1',
  editableTabs: [
    {
      title: '首页',
      name: '首页',
      content: '首页'
    },
    {
      title: 'Tab 1',
      name: '2',
      content: 'Tab 1 content'
    },
    {
      title: 'Tab 2',
      name: '3',
      content: 'Tab 2 content'
    }
  ]
}
const mutations = {
  setLoadRoute(state, data) {
    state.isLoadRoute = data
  },
  setUser(state, name) {
    state.username = name
  },
  setUserState(state, data) {
    state.userState += data
  },
  setMenuData(state, data) {
    state.menu_data = data
  },

}
const getters = {
  getUserState(state) {
    let data;
    if (state.userState == 0) {
      data = '无效'
    } else {
      data = state.userState + '级'
    }
    return data;
  }
}
const modules = {
  a: moduleA,
  b: moduleB
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  modules
})

（2）Tabs/index.vue 中的这两个数据 editableTabsValue 和 editableTabs 就从store中获取

注意：

如果你的在data中这样写，可能会无法正常显示，建议用computed 方式来写。

<template>
  <div>
    <el-tabs v-model="editableTabsValue" type="card" closable>
      <el-tab-pane
        :key="item.name"
        v-for="item in editableTabs"
        :label="item.title"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "Tabs",
  data() {
    return {};
  },
  computed: {
    editableTabsValue: {
      get() {
        return this.$store.state.editableTabsValue;
      },
      set(val) {
        this.$store.state.editableTabsValue = val;
      },
    },
    editableTabs: {
      get() {
        return this.$store.state.editableTabs;
      },
      set(val) {
        this.$store.state.editableTabs = val;
      },
    },
  },
};
</script>

<style scoped>
div {
  height: auto;
}
</style>

页面效果是一样的
在这里插入图片描述

2、菜单点击增加标签页

（1）在 store/index.js 中将写死的数据editableTabs 内容删除，只剩下首页的那条
（2）在mutations添加 editableTabs 数据变更的方法 addEditableTabs，因为我定义的菜单数据的时候，没有title属性，所以这里我都用title来代表

参考代码：

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './module/moduleA.js';
import moduleB from './module/moduleB.js';

Vue.use(Vuex)

const state = {
  username: '牛牛',
  userState: 0,
  menu_data: [],
  isLoadRoute: false,
  editableTabsValue: '1',
  editableTabs: [
    {
      title: '首页',
      name: '首页',
      content: '首页'
    }
  ]
}
const mutations = {
  setLoadRoute(state, data) {
    state.isLoadRoute = data
  },
  setUser(state, name) {
    state.username = name
  },
  setUserState(state, data) {
    state.userState += data
  },
  setMenuData(state, data) {
    state.menu_data = data
  },
  addEditableTabs(state, tab) {
    state.editableTabs.push({
      title: tab.name,
      name: tab.name
    })
    state.editableTabsValue = tab.name
  }
}
const getters = {
  getUserState(state) {
    let data;
    if (state.userState == 0) {
      data = '无效'
    } else {
      data = state.userState + '级'
    }
    return data;
  }
}
const modules = {
  a: moduleA,
  b: moduleB
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  modules
})

（3）给Aside/index.vue菜单增加点事件，selectMenu方法

<template>
  <div style="height: 100%">
    <el-menu
      background-color="#545c64"
      text-color="#ffffff"
      active-text-color="#ffd04b"
      class="el-menu-vertical-demo"
      router
    >
      <el-menu-item
        :index="item.path"
        v-for="item in menu_data"
        :key="item.name"
        @click="selectMenu(item)"
      >
        <i :class="item.icon"></i>{{ item.name }}
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {};
  },
  computed: {
    menu_data: {
      get() {
        return this.$store.state.menu_data;
      },
    },
  },
  methods: {
    selectMenu(item) {
      this.$store.commit("addEditableTabs", item);
    },
  },
};
</script>

<style scoped>
.el-icon-location,
.el-icon-document,
.el-icon-setting {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>

页面效果
在这里插入图片描述
问题：出现重复菜单名称标签

3、处理重复标签

在store/index.js文件中的addEditableTabs 中判断，如果数据中已经有了，则不重复添加，只需切换即可
在这里插入图片描述

页面效果
在这里插入图片描述
现在就只有两个标签了，目前展示正常，但是没法关闭

4、关闭标签页

标签页添加关闭事件

在el-tabs标签中添加 @tab-remove="removeTab"，在method添加对应的方法

<template>
  <div>
    <el-tabs
      v-model="editableTabsValue"
      type="card"
      closable
      @tab-remove="removeTab"
    >
      <el-tab-pane
        :key="item.name"
        v-for="item in editableTabs"
        :label="item.title"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "Tabs",
  data() {
    return {};
  },
  methods: {
    removeTab(targetName) {
      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.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
  },
  computed: {
    editableTabsValue: {
      get() {
        return this.$store.state.editableTabsValue;
      },
      set(val) {
        this.$store.state.editableTabsValue = val;
      },
    },
    editableTabs: {
      get() {
        return this.$store.state.editableTabs;
      },
      set(val) {
        this.$store.state.editableTabs = val;
      },
    },
  },
};
</script>

<style scoped>
div {
  height: auto;
}
</style>

页面效果
在这里插入图片描述

问题：

选中菜单，侧边栏没有进行对应的高亮展示
关闭了“一级菜单2”，但是页面内容还停留在“一级菜单2”，其实就是路由没有变

三、点击标签页操作

问题1：点击标签页选中菜单进行高亮展示

在Aside/index.vue中给 el-menu 设置属性 default-active

:default-active="this.$store.state.editableTabsValue"

将原来代码el-menu-item的index设置为"item.name"

:index="item.name"

加入路由跳转代码

因原来菜单点击，会根据index属性来跳转，index原来是path（路由地址），现在index属性更改为name了，则跳转不会生效，修改原来的router.js的代码，动态创建路由加入name属性（name:item.name），方便跳转。

修改router/index.js 代码

let oRouters = router.options.routes;
const buildRouter = ()=>{
    let data = store.state.menu_data;
    data.forEach(item=>{
        let new_router = {
            path:item.path,
            name:item.name,
            component:() => import('./components/'+item.component+'.vue')
        }
        oRouters[0].children.push(new_router);

    })
    router.addRoutes(oRouters)
}

在Aside/index.vue的 selectMenu方法中，加入路由跳转代码（根据name跳转），仅需一行代码即可。

selectMenu(item){
	//点击菜单跳转路由
    this.$router.push({name:item.name})
    this.$store.commit("addEditableTabs",item);
}

页面效果，可以实现点击标签页，菜单跟着高亮显示了
在这里插入图片描述
Aside/index.vue 页面代码

<template>
  <div style="height: 100%">
    <el-menu
      background-color="#545c64"
      text-color="#ffffff"
      active-text-color="#ffd04b"
      class="el-menu-vertical-demo"
      router
      :default-active="this.$store.state.editableTabsValue"
    >
      <el-menu-item
        :index="item.name"
        v-for="item in menu_data"
        :key="item.name"
        @click="selectMenu(item)"
      >
        <i :class="item.icon"></i>{{ item.name }}
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {};
  },
  computed: {
    menu_data: {
      get() {
        return this.$store.state.menu_data;
      },
    },
  },
  methods: {
    selectMenu(item) {
      //点击菜单跳转路由
      this.$router.push({ name: item.name });
      this.$store.commit("addEditableTabs", item);
    },
  },
};
</script>

<style scoped>
.el-icon-location,
.el-icon-document,
.el-icon-setting {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>

问题2：点击标签页路由也要跳转

上面遗留的问题2，点击标签页，标签页下方的页面没有跟着跳转，下面修改这个问题

在Tabs页面的 el-tabs 添加 tab-click 事件
添加方法，利用路由的name来跳转

<template>
  <div>
    <el-tabs
      v-model="editableTabsValue"
      type="card"
      closable
      @tab-remove="removeTab"
      @tab-click="clickTab"
    >
      <el-tab-pane
        :key="item.name"
        v-for="item in editableTabs"
        :label="item.title"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "Tabs",
  data() {
    return {};
  },
  methods: {
    removeTab(targetName) {
      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.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
    clickTab(target) {
      this.$router.push({ name: target.name });
    },
  },
  computed: {
    editableTabsValue: {
      get() {
        return this.$store.state.editableTabsValue;
      },
      set(val) {
        this.$store.state.editableTabsValue = val;
      },
    },
    editableTabs: {
      get() {
        return this.$store.state.editableTabs;
      },
      set(val) {
        this.$store.state.editableTabs = val;
      },
    },
  },
};
</script>

<style scoped>
div {
  height: auto;
}
</style>

效果展示
在这里插入图片描述

四、解决bug

关闭菜单后，菜单对应的路由没有跟着跳转
仅需在关闭标签的方法removeTab，最后加上以下代码

this.$router.push({name:activeName})

首页不允许关闭
在关闭标签的方法removeTab ，执行关闭之前，加入以下代码

if(targetName=='首页'){
    return ;
}

完整removeTab 代码

removeTab(targetName) {
   let tabs = this.editableTabs;
   let activeName = this.editableTabsValue;
   if(targetName=='首页'){
       return ;
   }
   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.editableTabsValue = activeName;
   this.editableTabs = tabs.filter(tab => tab.name !== targetName);

   this.$router.push({name:activeName})
}

还有一个潜藏的bug就是打开、关闭的顺序问题，先关闭前面的菜单会报错，后面解决

在这里插入图片描述报错代码如下

Uncaught runtime errors:
 Avoided redundant navigation to current location: "/index/menu2".
 NavigationDuplicated: Avoided redundant navigation to current location: "/index/menu2".
    at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1720:15)
    at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1708:15)
    at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1946:18)
    at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1887:8)
    at HTML5History.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2165:10)
    at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2510:22)
    at new Promise (<anonymous>)
    at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2509:12)
    at VueComponent.removeTab (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Tabs/index.vue?vue&type=script&lang=js:29:20)
    at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2903:26)