vue实现多个tab标签页的切换与关闭

1.实现效果

2.实现原理 

vuex，实现对当前激活项，当前tab列表，当前tab的translateX，当前缓存页，当前路由的状态管理。

将vuex中的数据保存到sessionStorage中，避免页面刷新丢失，当浏览器关闭时，清空数据。

通过ref定位，拿到当前窗口宽度与当前所在路由的tab标签的所有宽度，判断两者，实现对多tab超出窗口宽度的处理。

当点击tab标签页的时候，获取相应的激活项，动态的实现左侧菜单栏的选中状态，用watch监听，updateActiveName和updateOpened。

当关闭tab标签的时候，splice删除当前标签，若是删除的最后一项，跳转到该项的前一项页面。当长度为1时，跳转到首页。

3.主要代码

store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        catch_components: [],
        activePath: '/index',
        openNames: [],
        activeName: "",
        tranx: "-0",
        tabList: [
            { path: '/index', label: '首页', name: '首页' }
        ]
    },
    mutations: {
 
        //清空vuex数据
        clearTabs(state) {
            state.catch_components = []
            state.activePath = '/homepage'
            state.openNames = []
            state.activeName = ""
            state.tranx = "-0"
            state.tabList = [
                { path: '/homepage', label: '首页', name: 'home' }
            ]
        },
        // 跳转页面执行
        selectMenu(state, submenu) {
            var activePath = submenu.path
            var oldTabList = state.tabList
            var result = oldTabList.some(item => {
                if (item.path === activePath) {
                    return true
                }
            })
            if (!result) {
                oldTabList.push({
                    path: submenu.path,
                    name: submenu.name,
                    label: submenu.label,
                    index: submenu.index,
                    subName: submenu.subName
                })