先是tabs的遍历加载

       <el-tabs type="card" editable @edit="handleTabsEdit">
                        <!-- 初始化默认标签页 -->
                        <el-tab-pane v-for="item in tabs" :label="item.title" :name="item._id">
                            <components :is="item.component">
                            </components>
                        </el-tab-pane>
                    </el-tabs>

然后tabs的定义和菜单点击事件

            tabs: [
                {
                    _id: "sa1d32a1f234a65f6a",
                    title: '标签页1',
                    content: test
                }, {
                    _id: "sa1d32a1f234a65f6b",
                    title: '标签页2',
                    content: test
                }
            ],
//在加载菜单的时候 绑定了个tabsset事件
 tabsset(item) {
            console.log(item)
            this.$store.commit('addTabs', item);
        }
//sotre的定义
addTabs(state, item) {
            let tabs = state.tabs
            console.log('这是store页面存放的tabs数据', tabs);
            let index = tabs.findIndex((i) => i._id == item._id)
            // 检查item.path的路径是否已注册过组件
            // let isExist = router.options.routes.some((i) => i.path == item.path)
            // console.log('组件是否已注册', isExist);
            // Vue.component(item.path, () => import(`../views/${item.path}.vue`))
            if (index == -1) {
                tabs.push({
                    _id: item._id,
                    title: item.menuName,
                    // content: item.path
                    // content: () => import(`${item.path}`),
                   //下面这里的定义是动态加载组件
                    component: () => import(`@/views/${item.path}`),

                })
                state.tabsindex = tabs.length - 1
            } else {
                state.tabsindex = index
            }
        },