element ui 的 el-tab 当使用 router-view 时 mounted 执行了多次

这篇具有很好参考价值的文章主要介绍了element ui 的 el-tab 当使用 router-view 时 mounted 执行了多次。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

之前参照很多文章修改试图修正这个问题,结果都徒劳,终于让我找到 参考

我做了如下修改,主页面 main.vue

                <el-tabs v-if="tabbar.tabs.length > 0" style="margin:5px;height:99%"
                      v-model="tabbar.active" type="border-card" closable @tab-remove="removeTab"
                      ref='rootTabs'
                      @tab-click="onClickTabsItem">
                <el-tab-pane v-for="item in tabbar.tabs"
                              :key="item.menu_id"
                              :label="item.menu_name"
                              :name="item.menu_name" style="position: relative;">
                  <span v-if="item.menu_name!=='首页' && item.window_maximize === windowMaximize.允许" slot="label">{{item.menu_name}}
                    <i class="el-icon-full-screen" @click="fullScreen"></i>
                  </span>
                  <span slot="label" v-if="item.menu_name!=='首页' && tabbar.tabs && Array.isArray(tabbar.tabs)  && tabbar.tabs.length > 2">{{item.menu_name}}
                    <el-tooltip
                      content="关闭所有窗口"
                      placement="top"
                      effect="light">
                      <div slot="content" style="font-size:15px">
                        <svg t="1667882396181" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1814" width="18" height="18"><path d="M352 800H272A48 48 0 0 1 224 752V672H144A48 48 0 0 1 96 624v-480A48 48 0 0 1 144 96h480A48 48 0 0 1 672 144V224h80A48 48 0 0 1 800 272V352h80a48 48 0 0 1 48 48v480a48 48 0 0 1-48 48h-480a48 48 0 0 1-48-48V800z" fill="#FFFFFF" p-id="1815"></path><path d="M192 640v32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32h512a32 32 0 0 1 32 32v64h-32V128H128v512h64z" fill="#B7BEC8" p-id="1816"></path><path d="M320 768v32H256a32 32 0 0 1-32-32V256a32 32 0 0 1 32-32h512a32 32 0 0 1 32 32v64h-32V256H256v512h64z" fill="#808FA1" p-id="1817"></path><path d="M608 896v32h-224a32 32 0 0 1-32-32V384a32 32 0 0 1 32-32h512a32 32 0 0 1 32 32v224h-32v-224H384v512h224z" fill="#5D6D7E" p-id="1818"></path><path d="M704 672h224a32 32 0 0 1 32 32v224a32 32 0 0 1-32 32h-224a32 32 0 0 1-32-32v-224a32 32 0 0 1 32-32z m162.272 149.024l67.872-67.872-45.248-45.28-67.872 67.904-67.872-67.904-45.28 45.28 67.904 67.84-67.904 67.904 45.28 45.248 67.84-67.84 67.904 67.84 45.248-45.248-67.84-67.872z" fill="#EF633F" p-id="1819"></path></svg>
                          关闭其他所有选项卡  
                      </div>
                      <i  @click.stop="removeOtherTabs(item)">
                        <svg t="1667882396181" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1814" width="14" height="14"><path d="M352 800H272A48 48 0 0 1 224 752V672H144A48 48 0 0 1 96 624v-480A48 48 0 0 1 144 96h480A48 48 0 0 1 672 144V224h80A48 48 0 0 1 800 272V352h80a48 48 0 0 1 48 48v480a48 48 0 0 1-48 48h-480a48 48 0 0 1-48-48V800z" fill="#FFFFFF" p-id="1815"></path><path d="M192 640v32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32h512a32 32 0 0 1 32 32v64h-32V128H128v512h64z" fill="#B7BEC8" p-id="1816"></path><path d="M320 768v32H256a32 32 0 0 1-32-32V256a32 32 0 0 1 32-32h512a32 32 0 0 1 32 32v64h-32V256H256v512h64z" fill="#808FA1" p-id="1817"></path><path d="M608 896v32h-224a32 32 0 0 1-32-32V384a32 32 0 0 1 32-32h512a32 32 0 0 1 32 32v224h-32v-224H384v512h224z" fill="#5D6D7E" p-id="1818"></path><path d="M704 672h224a32 32 0 0 1 32 32v224a32 32 0 0 1-32 32h-224a32 32 0 0 1-32-32v-224a32 32 0 0 1 32-32z m162.272 149.024l67.872-67.872-45.248-45.28-67.872 67.904-67.872-67.904-45.28 45.28 67.904 67.84-67.904 67.904 45.28 45.248 67.84-67.84 67.904 67.84 45.248-45.248-67.84-67.872z" fill="#EF633F" p-id="1819"></path></svg>
                      </i>
                    </el-tooltip>
                  </span>
                  <keep-alive>
                    <router-view :name="item.menu_component" :ref="item.menu_component"></router-view>
                  </keep-alive>
                </el-tab-pane>
              </el-tabs>

之前参考某文章把 router-view 放在 el-tab-pane 外面都不起作用,问题根本不是出在 el-tab-pane,而是v-for 里面有多个route-view , keep-alive 时 tab 并未销毁掉,而是缓存隐藏了起来。需要把 router-view 的 name 与路由的 index.js 名称对应起来文章来源地址https://www.toymoban.com/news/detail-522421.html

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
// 组件存放的路径使用按需加载,webpack 打包时会分隔成单独的js文件,不会全部打包到 app.js 文件下面
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Login',
      component: resolve => require(['@/pages/LoginV2'], resolve)
    },
    {
      path: '/Main',
      name: 'Main',
      component: resolve => require(['@/pages/main'], resolve),
      children:[       
        {
          name:'Home',
          path:'Home',
          components: {Home:() => import('@/pages/Home')}
        },
        {
          path: 'Driver',
          name: 'Driver',
          components: {Driver:() => import('@/pages/Driver')}
        },
        {
          path: 'ItemOther',
          name: 'ItemOther',
          components: {ItemOther:() => import('@/pages/ItemOther')}
        },
        {
          path: 'Role',
          name: 'Role',
          components: {Role:() => import('@/pages/Role')}
        },
        {
          path: 'Supplier',
          name: 'Supplier',
          components: {Supplier:() => import('@/pages/Supplier')}
        },
        {
          path: 'User',
          name: 'User',
          components: {User:() => import('@/pages/User')}
        },
        {
          path: 'Button',
          name: 'Button',
          components: {Button:() => import('@/pages/Button')}
        },
        {
          path: 'Menu',
          name: 'Menu',
          components: {Menu:() => import('@/pages/Menu')}
        },
        {
          path: 'SiloWatchTimeOption', //筒仓排班时间信息设置
          name: 'SiloWatchTimeOption',
          components: {SiloWatchTimeOption:() => import('@/pages/SiloWatchTimeOption')}
        },
        {
          path: 'SiloMonitorReport', //筒仓日报表
          name: 'SiloMonitorReport',
          components: {SiloMonitorReport:() => import('@/pages/SiloMonitorReport')}
        },
        {
          path: 'GlobalParameters',
          name: 'GlobalParameters',
          components: {GlobalParameters:() => import('@/pages/GlobalParameters')}
        },
        {
          path: 'PurchaseOrder',
          name: 'PurchaseOrder',
          components: {PurchaseOrder:() => import('@/pages/PurchaseOrder')}
        },
        {
          path: 'Vehicle',
          name: 'Vehicle',
          components: {Vehicle:() => import('@/pages/Vehicle')}
        },
        {
          path: 'PurchaseReport',
          name: 'PurchaseReport',
          components: {PurchaseReport:() => import('@/pages/PurchaseReport')}
        },
        {
          path: 'OperationKanBan',
          name: 'OperationKanBan',
          components: {OperationKanBan:() => import('@/pages/kanban/OperationKanBan1')}
        },
        {
          path: 'TankDataKanBan',
          name: 'TankDataKanBan',
          components: {TankDataKanBan:() => import('@/pages/kanban/TankDataKanBan')}
        },
        {
          path: 'StoveTowerKanBan', //烘干塔看板
          name: 'StoveTowerKanBan',
          components: {StoveTowerKanBan:() => import('@/pages/kanban/StoveTowerKanBan')}
        },
        {
          path: 'SaleReport',
          name: 'SaleReport',
          components: {SaleReport:() => import('@/pages/SaleReport')}
        },
        {
          path: 'SaleOrder',
          name: 'SaleOrder',
          components: {SaleReport:() => import('@/pages/SaleOrder')}
        },
        {
          path: 'Equipment', // 设备台账
          name: 'Equipment',
          components: {Equipment:() => import('@/pages/equipment/Equipment')}
        },
        {
          path: 'EquipmentCharts', // 设备统计图表
          name: 'EquipmentCharts',
          components: {EquipmentCharts:() => import('@/pages/equipment/report/EquipmentCharts')}
        },
        {
          path: 'EquipmentMaintenanceCharts', // 设备维保统计图表
          name: 'EquipmentMaintenanceCharts',
          components: {EquipmentMaintenanceCharts:() => import('@/pages/equipment/report/EquipmentMaintenanceCharts')}
        },
        {
          path: 'EquipmentInfoClass', // 设备信息分类
          name: 'EquipmentInfoClass',
          components: {EquipmentInfoClass:() => import('@/pages/equipment/EquipmentInfoClass')}
        },
        {
          path: 'EquipmentClass', // 设备类型
          name: 'EquipmentClass',
          components: {EquipmentClass:() => import('@/pages/BasicData/EquipmentClass')}
        },
        {
          path: 'EquipmentLocationClass', // 设备位置
          name: 'EquipmentLocationClass',
          components: {EquipmentLocationClass:() => import('@/pages/BasicData/EquipmentLocationClass')}
        },
        {
          path: 'EquipmentLocationShift', // 设备位置值班排班表
          name: 'EquipmentLocationShift',
          components: {EquipmentLocationShift:() => import('@/pages/BasicData/EquipmentLocationShift')}
        },
        {
          path: 'SpareParts',
          name: 'SpareParts', // 备品备件台账
          components: {SpareParts:() => import('@/pages/equipment/SpareParts')}
        },
        {
          path: 'EquipMaintenanceCommonParam',
          name: 'EquipMaintenanceCommonParam', // 设备维修常用参数
          components: {EquipMaintenanceCommonParam:() => import('@/pages/equipment/EquipMaintenanceCommonParam')}
        },
        {
          path: 'EquipRepair',
          name: 'EquipRepair', // 设备报修
          components: {EquipRepair:() => import('@/pages/equipment/repair/EquipRepair')}
        },
        {
          path: 'EquipRepairBill',
          name: 'EquipRepairBill', // 设备维修单
          components: {EquipRepairBill:() => import('@/pages/equipment/repair/EquipRepairBill')}
        },
        {
          path: 'ComprehensiveRepair',
          name: 'ComprehensiveRepair', // 综合事务报修
          components: {ComprehensiveRepair:() => import('@/pages/equipment/repair/ComprehensiveRepair')}
        },
        {
          path: 'ComprehensiveRepairBill',
          name: 'ComprehensiveRepairBill', // 综合事务工单
          components: {ComprehensiveRepairBill:() => import('@/pages/equipment/repair/ComprehensiveRepairBill')}
        },
        {
          path: 'EquipRepairPlan',
          name: 'EquipRepairPlan', // 设备维修计划
          components: {EquipRepairPlan:() => import('@/pages/equipment/repair/EquipRepairPlan')}
        },
        {
          path: 'RepairList',
          name: 'RepairList', // 设备维修记录
          components: {RepairList:() => import('@/pages/equipment/repair/RepairList')}
        },
        {
          path: 'ComprehensiveRepairList',
          name: 'ComprehensiveRepairList', // 综合事务维修记录
          components: {ComprehensiveRepairList:() => import('@/pages/equipment/repair/ComprehensiveRepairList')}
        },
        {
          path: 'EquipMaintenanceStandard',
          name: 'EquipMaintenanceStandard', //设备保养标准
          components: {EquipMaintenanceStandard:() => import('@/pages/equipment/maintenance/EquipMaintenanceStandard')}
        },
        {
          path: 'EquipBYPlan',
          name: 'EquipBYPlan', //设备保养计划
          components: {EquipBYPlan:() => import('@/pages/equipment/maintenance/EquipBYPlan')}
        },
        {
          path: 'BYBill',
          name: 'BYBill', //设备保养工单
          components: {BYBill:() => import('@/pages/equipment/maintenance/BYBill')}
        },
        {
          path: 'MyBYBill',
          name: 'MyBYBill', //我的设备保养工单
          components: {MyBYBill:() => import('@/pages/equipment/maintenance/MyBYBill')}
        },
        {
          path: 'BYList',
          name: 'BYList', //设备保养记录
          components: {BYList:() => import('@/pages/equipment/maintenance/BYList')}
        },
        {
          path: 'MyEquipRepairBill',
          name: 'MyEquipRepairBill', //设备维修---我维修
          components: {MyEquipRepairBill:() => import('@/pages/equipment/repair/MyEquipRepairBill')}
        },
        {
          path: 'MyComprehensiveRepairBill',
          name: 'MyComprehensiveRepairBill', //综合事务维修---我维修
          components: {MyComprehensiveRepairBill:() => import('@/pages/equipment/repair/MyComprehensiveRepairBill')}
        },
        {
          path: 'MyComprehensiveRepair',
          name: 'MyComprehensiveRepair', //综合事务维修---我报修
          components: {MyComprehensiveRepair:() => import('@/pages/equipment/repair/MyComprehensiveRepair')}
        },
        {
          path: 'MyEquipRepair',
          name: 'MyEquipRepair', //设备维修---我报修
          components: {MyEquipRepair:() => import('@/pages/equipment/repair/MyEquipRepair')}
        },
        {
          path: 'PurchaseReceipt',
          name: 'PurchaseReceipt',
          components: {PurchaseReceipt:() => import('@/pages/PurchaseReceipt')}
        },
        {
          path: 'MixOilRecipe',
          name: 'MixOilRecipe',
          components: {MixOilRecipe:() => import('@/pages/MixOilRecipe')}
        },
        {
          path: 'WorkShopSection',
          name: 'WorkShopSection',
          components: {WorkShopSection:() => import('@/pages/WorkShopSection')}
        },
        {
          path: 'ProducePick',
          name: 'ProducePick',
          components: {ProducePick:() => import('@/pages/ProducePick')}
        },
        {
          path: 'ItemInOutBook',
          name: 'ItemInOutBook',
          components: {ItemInOutBook:() => import('@/pages/ItemInOutBook')}
        },
        {
          path: 'TechnologyParameter',
          name: 'TechnologyParameter',
          components: {TechnologyParameter:() => import('@/pages/TechnologyParameter')}
        },
        {
          path: 'TechnologyScheme',
          name: 'TechnologyScheme',
          components: {TechnologyScheme:() => import('@/pages/TechnologyScheme')}
        },
        {
          path: 'Rapeseed',
          name: 'Rapeseed',
          components: {Rapeseed:() => import('@/pages/oil/Rapeseed')}
        },
        {
          path: 'OilsManage',
          name: 'OilsManage',
          components: {OilsManage:() => import('@/pages/oil/OilsManage')}
        },
        {
          path: 'OilProductPackage',
          name: 'OilProductPackage',
          components: {OilProductPackage:() => import('@/pages/oil/OilProductPackage')}
        },
        {
          path: 'PurchaseSuggest',
          name: 'PurchaseSuggest',
          components: {PurchaseSuggest:() => import('@/pages/PurchaseSuggest')}
        },
        {
          path: 'DataPermissionCategory',
          name: 'DataPermissionCategory',
          components: {DataPermissionCategory:() => import('@/pages/datapermisson/DataPermissionCategory')}
        },
        {
          path: 'WarehouseQuery',
          name: 'WarehouseQuery',
          components: {WarehouseQuery:() => import('@/pages/Warehouse/WarehouseQuery')}
        },
        {
          path: 'RoleDataPermission',
          name: 'RoleDataPermission',
          components: {RoleDataPermission:() => import('@/pages/datapermisson/RoleDataPermission')}
        },
        {
          path: 'ItemClass',
          name: 'ItemClass',
          components: {ItemClass:() => import('@/pages/ItemClass')}
        },
        {
          path: 'OtherPick',
          name: 'OtherPick',
          components: {OtherPick:() => import('@/pages/OtherPick')}
        },
        {
          path: 'OrganizationMgr',
          name: 'OrganizationMgr',
          components: {OrganizationMgr:() => import('@/pages/organization/OrganizationMgr')}
        },
        {
          path: 'AnnualMain',
          name: 'AnnualMain',
          components: {AnnualMain:() => import('@/pages/productionplan/annual/AnnualMain')}
        },
        {
          path: 'Apply',
          name: 'Apply',
          components: {Apply:() => import('@/pages/Apply')}
        },
        {
          path: 'OtherReceiving',
          name: 'OtherReceiving',
          components: {OtherReceiving:() => import('@/pages/OtherReceiving')}
        },
        {
          path: 'Unit',
          name: 'Unit',
          components: {Unit:() => import('@/pages/Unit')}
        },
        {
          // 入库
          path: 'Stockin',
          name: 'Stockin',
          components: {Stockin:() => import('@/pages/Stockin')}
        },
        {
          // 出库
          path: 'Stockout',
          name: 'Stockout',
          components: {Stockout:() => import('@/pages/Stockout')}
        },
        {
          // 物料存放规则
          path: 'MaterialRule',
          name: 'MaterialRule',
          components: {MaterialRule:() => import('@/pages/MaterialRule')}
        },
        {
          // 物料存放规则
          path: 'ProductReturn',
          name: 'ProductReturn',
          components: {ProductReturn:() => import('@/pages/ProductReturn')}
        },
        {
          path: 'TakeGoods',
          name: 'TakeGoods',
          components: {TakeGoods:() => import('@/pages/TakeGoods')}
        },
        {
          path: 'MonthlyMain',
          name: 'MonthlyMain',
          components: {MonthlyMain:() => import('@/pages/productionplan/monthly/MonthlyMain')}
        },
        {
          path: 'WeeklyMain',
          name: 'WeeklyMain',
          components: {WeeklyMain:() => import('@/pages/productionplan/weekly/WeeklyMain')},
          // meta: { keepAlive: false }
          // 如果isBack是false,表明需要获取新数据,否则就不再请求,直接使用缓存的数据
          meta: { isBack: false }
        },
        {
          path: 'WeeklyPlan',
          name: 'WeeklyPlan',
          components: {WeeklyPlan:() => import('@/pages/productionplan/weekly/WeeklyPlan')},
          // meta: { keepAlive: false }
          // 如果isBack是false,表明需要获取新数据,否则就不再请求,直接使用缓存的数据
          meta: { isBack: false }
        },
        {
          path: 'TaskMain',
          name: 'TaskMain',
          components: {TaskMain:() => import('@/pages/productiontask/TaskMain')},
        },
        {
          path: 'TaskDispatch',
          name: 'TaskDispatch',
          components: {TaskDispatch:() => import('@/pages/productiontask/TaskDispatch')},
        },
        {
          path: 'PrintTemplate',
          name: 'PrintTemplate',
          components: {PrintTemplate:() => import('@/pages/print/PrintTemplate')},
        },
        {
          path: 'UnloadLocation',
          name: 'UnloadLocation',
          components: {UnloadLocation:() => import('@/pages/BasicData/UnloadLocation')},
        },
        {
          path: 'TankInfo',
          name: 'TankInfo',
          components: {TankInfo:() => import('@/pages/tank/TankInfo')},
        },
        {
          path: 'TankFarmRuler',
          name: 'TankFarmRuler',
          components: {TankFarmRuler:() => import('@/pages/tank/TankFarmRuler')},
        },
        {
          path: 'TankDailyReport',
          name: 'TankDailyReport',
          components: {TankDailyReport:() => import('@/pages/tank/TankDailyReport')},
        },
        {
          path: 'TankInspection',
          name: 'TankInspection',
          components: {TankInspection:() => import('@/pages/tank/TankInspection')},
        },
        {
          //  托盘管理
          path: 'PalletInfo',
          name: 'PalletInfo',
          // component: resolve => require(['@/pages/PalletManage'], resolve)
          components: {PalletInfo:() => import('@/pages/Storage/PalletInfoManage')},
        },
        {
          //  库区类型
          path: 'StorageSort',
          name: 'StorageSort',
          // component: resolve => require(['@/pages/PalletManage'], resolve)
          components: {StorageSort:() => import('@/pages/Storage/StorageSortManage')},
        },
        {
          path: 'BusinessConfig',
          name: 'BusinessConfig',
          components: {BusinessConfig:() => import('@/pages/BusinessConfig')},
        },
        {
          //收发油
          path: 'ReceiveOutOil',
          name: 'ReceiveOutOil',
          components: {ReceiveOutOil:() => import('@/pages/ReceiveOutOil')},
        },
        {
          //采购收货管理
          path: 'PurchaseReceiptManage',
          name: 'PurchaseReceiptManage',
          components: {PurchaseReceiptManage:() => import('@/pages/PurchaseReceiptManage')},
        },
        {
          //成品油规格管理
          path: 'OilSpecManage',
          name: 'OilSpecManage',
          components: {OilSpecManage:() => import('@/pages/OilSpecManage')},
        },
        {
          //初始化规则
          path: 'SystemRestore',
          name: 'SystemRestore',
          components: {SystemRestore:() => import('@/pages/SYS/SystemRestore')},
        },
        {
          // 仓库
          path: 'WarehouseInfo',
          name: 'WarehouseInfo',
          components: {WarehouseInfo:() => import('@/pages/Storage/WarehouseInfoManage')},
        },
        {
          // 称重录入
          path: 'WeighInput',
          name: 'WeighInput',
          components: {WeighInput:() => import('@/pages/weighRecords/WeighInput')},
        },
        {
          // 菜籽收购(临时)
          path: 'RapeseedBuyTemp',
          name: 'RapeseedBuyTemp',
          components: {RapeseedBuyTemp:() => import('@/pages/rapeseedBuyTemps/RapeseedBuyTemp')},
        },
        {
          // 项目
          path: 'Project',
          name: 'Project',
          components: {Project:() => import('@/pages/BasicData/Project')},
        },
        {
          // 项目分类
          path: 'ProjectClass',
          name: 'ProjectClass',
          components: {ProjectClass:() => import('@/pages/BasicData/ProjectClass')},
        },
        {
          // 存货分类
          path: 'InventoryClass',
          name: 'InventoryClass',
          components: {InventoryClass:() => import('@/pages/BasicData/InventoryClass')},
        },
        {
          // 部门
          path: 'Department',
          name: 'Department',
          components: {Department:() => import('@/pages/BasicData/Department')},
        },
        {
          // 员工资料
          path: 'Employee',
          name: 'Employee',
          components: {Employee:() => import('@/pages/BasicData/Employee')},
        },
        {
          // 往来单位分类
          path: 'PartnerClass',
          name: 'PartnerClass',
          components: {PartnerClass:() => import('@/pages/BasicData/PartnerClass')}
        },
        {
          // 地区资料
          path: 'District',
          name: 'District',
          components: {District:() => import('@/pages/BasicData/District')}
        },
        {
          // 往来单位
          path: 'Partner',
          name: 'Partner',
          components: {Partner:() => import('@/pages/BasicData/Partner')}
        },
        {
          // 品牌
          path: 'Product',
          name: 'Product',
          components: {Product:() => import('@/pages/BasicData/Product')}
        },
        {
          // 计量单位
          path: 'UnitInfo',
          name: 'UnitInfo',
          components: {UnitInfo:() => import('@/pages/BasicData/UnitInfo')}
        },
        {
          // 存货信息
          path: 'InventoryInfo',
          name: 'InventoryInfo',
          components: {InventoryInfo:() => import('@/pages/BasicData/InventoryInfo')}
        },
        {
          // 币种
          path: 'Currency',
          name: 'Currency',
          components: {Currency:() => import('@/pages/BasicData/Currency')}
        },
        {
          // 出入库类别
          path: 'RDStyle',
          name: 'RDStyle',
          components: {RDStyle:() => import('@/pages/BasicData/RDStyle')}
        },
        {
          // 业务分类
          path: 'BusiType',
          name: 'BusiType',
          components: {BusiType:() => import('@/pages/BasicData/BusiType')}
        },
        {
          //单据分类
          path: 'BillType',
          name: 'BillType',
          components: {BillType:() => import('@/pages/BasicData/BillType')}
        },
        {
          // 调配订单
          path: 'MixOilOrder',
          name: 'MixOilOrder',
          components: {MixOilOrder:() => import('@/pages/MixOil/MixOilOrder')}
        },
        {
          // 调配订单调配过程
          path: 'MixOilOrderDetail',
          name: 'MixOilOrderDetail',
          components: {MixOilOrderDetail:() => import('@/pages/MixOil/MixOilOrderDetail')}
        },
        {
          // 调配订单明细浏览
          path: 'MixOilOrderDetailView',
          name: 'MixOilOrderDetailView',
          components: {MixOilOrderDetailView:() => import('@/pages/MixOil/MixOilOrderDetailView')}
        },
        {
          // 行驶证
          path: 'VehiceInfo',
          name: 'VehiceInfo',
          components: {VehiceInfo:() => import('@/pages/BasicData/VehiceInfo')}
        },
        {
          // 司机信息
          path: 'DriverInfo',
          name: 'DriverInfo',
          components: {DriverInfo:() => import('@/pages/BasicData/DriverInfo')}
        },
        {
          // 叫号入厂
          path: 'CallFactory',
          name: 'CallFactory',
          components: {CallFactory:() => import('@/pages/PreInStore/CallFactory')}
        },
        {
          // 菜籽入库
          path: 'PreInStoreExtend',
          name: 'PreInStoreExtend',
          components: {PreInStoreExtend:() => import('@/pages/PreInStore/PreInStoreExtend')}
        },
        {
          // 出厂还卡
          path: 'FactoryCardReturn',
          name: 'FactoryCardReturn',
          components: {FactoryCardReturn:() => import('@/pages/PreInStore/CardReturnAudit')}
        },
        {
          // 审核入库
          path: 'AuditWarehouse',
          name: 'AuditWarehouse',
          components: {AuditWarehouse:() => import('@/pages/PreInStore/CardReturnAudit')}
        },
        {
          // 质检模板
          path: 'QTTemplate',
          name: 'QTTemplate',
          components: {QTTemplate:() => import('@/pages/BasicData/QTTemplate')}
        },
        {
          // 产成品入库
          path: 'ProductReceiveIn',
          name: 'ProductReceiveIn',
          components: {ProductReceiveIn:() => import('@/pages/StoreBill/ProductReceive')}
        },
        {
          // 产成品出库
          path: 'ProductReceiveOut',
          name: 'ProductReceiveOut',
          components: {ProductReceiveOut:() => import('@/pages/StoreBill/ProductReceive')}
        },
        {
          // 产成品出入库-添加修改
          path: 'ProductReceiveAddUpdateIn',
          name: 'ProductReceiveAddUpdateIn',
          components: {ProductReceiveAddUpdateIn:() => import('@/pages/StoreBill/ProductReceiveAddUpdate')}
        },
        {
          // 产成品出入库-添加修改
          path: 'ProductReceiveAddUpdateOut',
          name: 'ProductReceiveAddUpdateOut',
          components: {ProductReceiveAddUpdateOut:() => import('@/pages/StoreBill/ProductReceiveAddUpdate')}
        },
        {
          //进厂质检
          path: 'InQualityTest',
          name: 'InQualityTest',
          components: {InQualityTest:() => import('@/pages/PreInStore/InQualityTest')}
        },
        {
          //出入厂初检
          path: 'PreInStorePreQT1',
          name: 'PreInStorePreQT1',
          components: {PreInStorePreQT1:() => import('@/pages/PreInStore/PreInStoreQT')}
        },
        {
          //出入厂复检
          path: 'PreInStoreQT1',
          name: 'PreInStoreQT1',
          components: {PreInStoreQT1:() => import('@/pages/PreInStore/PreInStoreQT')}
        },
        {
          //出入厂初检
          path: 'PreInStorePreQT0',
          name: 'PreInStorePreQT0',
          components: {PreInStorePreQT0:() => import('@/pages/PreInStore/PreInStoreQT')}
        },
        {
          //出入厂复检
          path: 'PreInStoreQT0',
          name: 'PreInStoreQT0',
          components: {PreInStoreQT0:() => import('@/pages/PreInStore/PreInStoreQT')}
        },

        {
          //出入厂毛重
          path: 'PreInStoreGross',
          name: 'PreInStoreGross',
          components: {PreInStoreGross:() => import('@/pages/PreInStore/PreInStoreScale')}
        },
        {
          //出入厂皮重
          path: 'PreInStoreUnladen',
          name: 'PreInStoreUnladen',
          components: {PreInStoreUnladen:() => import('@/pages/PreInStore/PreInStoreScale')}
        },
        {
          //出入厂装卸
          path: 'PreInStoreLoad',
          name: 'PreInStoreLoad',
          components: {PreInStoreLoad:() => import('@/pages/PreInStore/PreInStoreLoad')}
        },
        {
          //系统枚举
          path: 'SysEnum',
          name: 'SysEnum',
          components: {SysEnum:() => import('@/pages/BasicData/SysEnum')}
        },
        {
          //入厂登记
          path: 'FactoryEntryRegister',
          name: 'FactoryEntryRegister',
          components: {FactoryEntryRegister:() => import('@/pages/PreInStore/FactoryEntryRegister')}
        },
        {
          //预约录入
          path: 'ReservationEntry',
          name: 'ReservationEntry',
          components: {ReservationEntry:() => import('@/pages/PreInStore/ReservationEntry')}
        },
        {
          //货位
          path: 'InvLocation',
          name: 'InvLocation',
          components: {InvLocation:() => import('@/pages/BasicData/InvLocation')}
        },
        {
          //采购入库单
          path: 'PurchaseWarehousing',
          name: 'PurchaseWarehousing',
          components: {PurchaseWarehousing:() => import('@/pages/PrevRDFactory/PrevRDFactoryBill')}
        },
        {
          //采购退货单
          path: 'PurchaseReturnGoods',
          name: 'PurchaseReturnGoods',
          components: {PurchaseReturnGoods:() => import('@/pages/PrevRDFactory/PrevRDFactoryBill')}
        },
        {
          //销售出库单
          path: 'SaleIssue',
          name: 'SaleIssue',
          components: {SaleIssue:() => import('@/pages/PrevRDFactory/PrevRDFactoryBill')}
        },
        {
          //销售退货单
          path: 'SaleReturnGoods',
          name: 'SaleReturnGoods',
          components: {SaleReturnGoods:() => import('@/pages/PrevRDFactory/PrevRDFactoryBill')}
        },
        {
          //材料出库单
          path: 'MaterialDispatchBillIn',
          name: 'MaterialDispatchBillIn',
          components: {MaterialDispatchBillIn:() => import('@/pages/StoreBill/MaterialDispatchBill')}
        },
        {
          //材料出库退货单
          path: 'MaterialDispatchBillOut',
          name: 'MaterialDispatchBillOut',
          components: {MaterialDispatchBillOut:() => import('@/pages/StoreBill/MaterialDispatchBill')}
        },
        {
          //材料出库单-添加修改
          path: 'MaterialDispatchBillAddUpdateIn',
          name: 'MaterialDispatchBillAddUpdateIn',
          components: {MaterialDispatchBillAddUpdateIn:() => import('@/pages/StoreBill/MaterialDispatchBillAddUpdate')}
        },
        {
          //材料出库单-添加修改
          path: 'MaterialDispatchBillAddUpdateOut',
          name: 'MaterialDispatchBillAddUpdateOut',
          components: {MaterialDispatchBillAddUpdateOut:() => import('@/pages/StoreBill/MaterialDispatchBillAddUpdate')}
        },
        {
          //粕库报表
          path: 'MealWarehouse',
          name: 'MealWarehouse',
          components: {MealWarehouse:() => import('@/pages/Report/MealWarehouse')}
        },
        {
          //包装油BOM清单
          path: 'PackagingOilBom',
          name: 'PackagingOilBom',
          components: {PackagingOilBom:() => import('@/pages/BasicData/PackagingOilBom')}
        },
        {
          //用电量报表
          path: 'PowerReport',
          name: 'PowerReport',
          components: {PowerReport:() => import('@/pages/Energy/PowerReport')}
        },
        {
          //用水量报表
          path: 'WaterReport',
          name: 'WaterReport',
          components: {WaterReport:() => import('@/pages/Energy/WaterReport')}
        },
        {
          //用蒸汽量报表
          path: 'SteamReport',
          name: 'SteamReport',
          components: {SteamReport:() => import('@/pages/Energy/SteamReport')}
        },
        {
          //生产报备
          path: 'TaskEvent',
          name: 'TaskEvent',
          components: {TaskEvent:() => import('@/pages/productiontask/TaskEvent')}
        },
        {
          //质检点位
          path: 'QTLocation',
          name: 'QTLocation',
          components: {QTLocation:() => import('@/pages/BasicData/QTLocation')}
        },
        {
          //存货质检设置
          path: 'InventoryQTSet',
          name: 'InventoryQTSet',
          components: {InventoryQTSet:() => import('@/pages/BasicData/InventoryQTSet')}
        },
        {
          //精炼生产订单明细
          path: 'RefineDetail',
          name: 'RefineDetail',
          components: {RefineDetail:() => import('@/pages/Refine/RefineDetail')}
        },
        {
          //浏览精炼生产订单明细
          path: 'RefineDetailView',
          name: 'RefineDetailView',
          components: {RefineDetailView:() => import('@/pages/Refine/RefineDetailView')}
        },
        {
          //过程质检-烘干
          path: 'Dry',
          name: 'Dry',
          components: {Dry:() => import('@/pages/QTs/ProcessQT')}
        },
        {
          //过程质检-清理
          path: 'Clear',
          name: 'Clear',
          components: {Clear:() => import('@/pages/QTs/ProcessQT')}
        },
        {
          //过程质检-预产
          path: 'PreProduction',
          name: 'PreProduction',
          components: {PreProduction:() => import('@/pages/QTs/ProcessQT')}
        },
        {
          //过程质检-预榨炒料
          path: 'PrePressedFriedMaterials',
          name: 'PrePressedFriedMaterials',
          components: {PrePressedFriedMaterials:() => import('@/pages/QTs/ProcessQT')}
        },
        {
          //过程质检-预榨产出
          path: 'PrePressedOutput',
          name: 'PrePressedOutput',
          components: {PrePressedOutput:() => import('@/pages/QTs/ProcessQT')}
        },
        {
          //过程质检-浸出
          path: 'Leach',
          name: 'Leach',
          components: {Leach:() => import('@/pages/QTs/ProcessQT')}
        },
        {
          //过程质检-精炼
          path: 'Refine',
          name: 'Refine',
          components: {Refine:() => import('@/pages/QTs/ProcessQT')}
        },
        {
          //过程质检-调和
          path: 'Reconcile',
          name: 'Reconcile',
          components: {Reconcile:() => import('@/pages/QTs/ProcessQT')}
        },
        {
          //过程质检-包装
          path: 'Packing',
          name: 'Packing',
          components: {Packing:() => import('@/pages/QTs/ProcessQT')}
        },
        {
          //设备预警信息看板
          path: 'EquipmentAlarmKanban',
          name: 'EquipmentAlarmKanban',
          components: {EquipmentAlarmKanban:() => import('@/pages/kanban/EquipmentAlarmKanban')}
        },
        {
          //能源消耗情况看板
          path: 'EnergyStatusKanBan',
          name: 'EnergyStatusKanBan',
          components: {EnergyStatusKanBan:() => import('@/pages/kanban/EnergyStatusKanBan')}
        },
        {
          //成本效益分析看板
          path: 'CostBenefitKanban',
          name: 'CostBenefitKanban',
          components: {CostBenefitKanban:() => import('@/pages/kanban/CostBenefitKanban')}
        },
        {
          //其他质检-污水处理
          path: 'Sewerage',
          name: 'Sewerage',
          components: {Sewerage:() => import('@/pages/QTs/OtherQT')}
        },
        {
          //仓库质检-筒仓
          path: 'Silo',
          name: 'Silo',
          components: {Silo:() => import('@/pages/QTs/WarehouseQT')}
        },
        {
          //仓库质检-压榨毛油罐
          path: 'PressCrudeOilTank',
          name: 'PressCrudeOilTank',
          components: {PressCrudeOilTank:() => import('@/pages/QTs/WarehouseQT')}
        },
        {
          //仓库质检-浸出毛油罐
          path: 'LeachingCrudeOilTank',
          name: 'LeachingCrudeOilTank',
          components: {LeachingCrudeOilTank:() => import('@/pages/QTs/WarehouseQT')}
        },
        {
          //仓库质检-精炼成品油罐
          path: 'RefinedProductCrudeOilTank',
          name: 'RefinedProductCrudeOilTank',
          components: {RefinedProductCrudeOilTank:() => import('@/pages/QTs/WarehouseQT')}
        },
        {
          //仓库质检-小包装仓库
          path: 'SmallPackagingWarehouse',
          name: 'SmallPackagingWarehouse',
          components: {SmallPackagingWarehouse:() => import('@/pages/QTs/WarehouseQT')}
        },
        {
          //仓库质检-粕库
          path: 'MealStorehouse',
          name: 'MealStorehouse',
          components: {MealStorehouse:() => import('@/pages/QTs/WarehouseQT')}
        },
        {
          //包装车间生产看板
          path: "PackagingWorkshopKanban",
          name: 'PackagingWorkshopKanban',
          components: {PackagingWorkshopKanban:() => import('@/pages/kanban/PackagingWorkshopKanban')}
        },
        {
          //精炼车间1号离心机
          path: "JLWorkshopLXJ01Kanban",
          name: 'JLWorkshopLXJ01Kanban',
          components: {JLWorkshopLXJ01Kanban:() => import('@/pages/kanban/JLWorkshopLXJ01Kanban')}
        },
        {
          //精炼车间2号离心机
          path: "JLWorkshopLXJ02Kanban",
          name: 'JLWorkshopLXJ02Kanban',
          components: {JLWorkshopLXJ02Kanban:() => import('@/pages/kanban/JLWorkshopLXJ02Kanban')}
        },
        {
          //自控变量配置-调配单
          path: "TagConfigMixOilOrder",
          name: "TagConfigMixOilOrder",
          components: {TagConfigMixOilOrder:() => import('@/pages/TagConfig/TagConfigMixOilOrder')}
        },
        {
          //财务报表-收入报表
          path: "Revenue",
          name: "Revenue",
          components: {Revenue:() => import('@/pages/FinancialStatements/RevenueExpenditure')}
        },
        {
          //财务报表-支出报表
          path: "Expenditure",
          name: "Expenditure",
          components: {Expenditure:() => import('@/pages/FinancialStatements/RevenueExpenditure')}
        },
        {
          //财务报表-年度预算
          path: "Budget",
          name: "Budget",
          components: {Budget:() => import('@/pages/FinancialStatements/BudgetBalance')}
        },
        {
          //财务报表-预算结余
          path: "Balance",
          name: "Balance",
          components: {Balance:() => import('@/pages/FinancialStatements/BudgetBalance')}
        },
      ]
    }
  ]
});

到了这里,关于element ui 的 el-tab 当使用 router-view 时 mounted 执行了多次的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element-ui中el-tabs的下划线样式微调

    1.页面加载周期结束之后调用方法          2.写这个方法 3.el-tabs上绑定ref就可以了          4.结果:下划线就可以向左边偏移一点了,看起来更好看  

    2024年02月11日
    浏览(35)
  • 解决element ui中el-tabs标签点击切换闪屏问题

    现象:点击切换 element ui中el-tabs时候,table会出现闪一下的状况; 初始element ui中el-tabs组件代码如下: 使用v-if=\\\"activeName===\\\'first\\\'\\\" 解决闪屏   改造后代码如下:

    2024年02月07日
    浏览(48)
  • Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中

    目录 默认样式 修改默认字体颜色: 修改鼠标悬浮/选中字体颜色: 去掉长分割线并修改下划线颜色 完整代码 默认样式 注意事项:一定要在 style scoped不然修改的样式不会覆盖生效 修改默认字体颜色: 修改鼠标悬浮/选中字体颜色: 去掉长分割线并修改下划线颜色 完整代码

    2024年02月04日
    浏览(88)
  • 【element-ui 中 el-tabs+el-menu 实现点击菜单 新增导航tab页 并实现关闭其他、当前、所有的功能】

    element-ui 【el-tabs+el-menu 实现点击菜单 新增导航tab页 并实现关闭其他、当前、所有的功能】 文章分3个部分 el-tabs 以及右击菜单代码 vuex 代码及其方法实现 router路由信息常规写法el-menu写法常规(自行去掉修饰部分) el-tabs 以及右击菜单代码

    2024年02月11日
    浏览(56)
  • 修改element-ui中Tabs标签页下划线默认颜色的方法以及为什么设置了.el-tabs /deep/ .el-tabs__nav-wrap::after不起效果

    类似图上的灰色线段,这是Tabs的默认样式, 在项目中的路径位置在:node_modules/element-ui/theme-chalk/tag.css   (我原本想在源文件直接改颜色的,但是找了一圈不知道哪个是他的颜色哈哈哈) 方法是: /deep/ 深度作用操作符:可以使样式作用的更深,例如影响子组件。 同时,

    2024年02月09日
    浏览(41)
  • vue使用路由router-view

    前言: router-view 与 NavMenu 导航栏的配合,在 web 应用中极为常见。其原理就是采用 SPA(single-page-application) 模式,就是只有一个 Web 页面的应用,通过 router 来控制页面的刷新和迭代。 提示: 以下示例基于 vue2.6.14 版本, vue-router3.5.2 版本, element-ui2.15.12 版本。 好了,废话不多

    2024年02月13日
    浏览(34)
  • elment-ui el-tabs组件 每次点击后 created方法都会执行2次

    先看错误的 日志打印:  错误的代码如下: 正确的日志打印:  正确的代码如下:  前言:     在element-ui的tabs组件中,我们发现每次切换页面,所有的子组件都会重新渲染一次。当子页面需要发送数据请求并且子页面过多时,这样会过多的占用网络资源。这里我们可以使用 v-if

    2024年04月28日
    浏览(42)
  • keep-alive和router-view配合使用缓存整个路由页面以及路由切换

    实现内容:通过vue实现,在页面有侧边栏动态来展示当前页面流程,右边进行页面的切换,左右两边都是组件,但是A/B/C组件的切换是通过keep-alive搭配router-view实现的,首先在当前文件中创建五个文件:index.vue,A/B/C.vue,router.json 在index.vue中,实现的是整个页面的布局,左边组件

    2024年02月16日
    浏览(35)
  • 对于<router-view>标签的理解

    router-view的含义: router-view: 路由容器 Vue 路由中的 router-view 是用来承载当前级别下的子级路由的一个视图标签; 此标签的作用就是显示当前路由级别下一级的页面。 router-view的作用: 就比如说App.vue是根组件,在它的template标签里使用router-view,而且配置好路由的情况下,就

    2024年01月17日
    浏览(38)
  • Vue中router-view无法显示

    如果你存在: 代码没报错,运行成功,但是index.js中router挂接的内容无法显示, 没有犯书写错误,routes 和 component 没有写错, 在浏览器中检查,App.vue中对应的 router-view为空 那么建议你接着看,首先, 正确的结果: 以上,没什么问题的话,可以看到  App.vue中对应的 router-

    2024年02月11日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包