优化多页签重新加载页面

src/layout/components/AppMain.vue

@@ -5,9 +5,9 @@
     </div>
     <div ref="keepAliveContainer">
       <keep-alive>
-        <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"/>
+        <router-view v-if="$route.meta.keepAlive && isRouterAlive" :key="$route.fullPath"/>
       </keep-alive>
-      <router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath"></router-view>
+      <router-view v-if="!$route.meta.keepAlive && isRouterAlive" :key="$route.fullPath"></router-view>
     </div>
 
   </section>
@@ -22,11 +22,28 @@ export default {
   components: {
     Breadcrumb
   },
+  
+  provide () {
+    // 父组件中通过provide来提供变量，在子组件中通过inject来注入。
+    return {
+      reloads: this.reloads
+    };
+  },
   data() {
     return {
       keepAliveComponentInstance: null,
+      isRouterAlive: true
     };
   },
+  methods:{
+    reloads () {
+      this.isRouterAlive = false;
+      this.$nextTick(function () {
+        this.isRouterAlive = true;
+      });
+    },
+
+  },
   mounted() {
     setTimeout(() => {
       window.addEventListener('message',function(e){
@@ -37,9 +54,7 @@ export default {
         }
       },false)
     }, 2000)
-    console.log(this.$refs)
     this.keepAliveComponentInstance = this.$refs.keepAliveContainer.childNodes[0].__vue__;
-    console.log(this.keepAliveComponentInstance)
 
   },
   beforeDestroy() {

src/layout/components/Breadcrumb.vue

@@ -10,20 +10,20 @@
     </el-scrollbar>
     <div v-show="contextMenuVisible">
       <ul :style="{ left: contextMenuLeft + 'px', top: contextMenuTop + 'px' }" class="__contextmenu">
-        <!-- <li v-if="contextMenuTargetPageRoute.fullPath == $route.fullPath">
+        <li v-if="contextMenuTargetPageRoute.fullPath == $route.fullPath">
           <el-button type="text" @click="reload()" size="mini">
             重新加载
           </el-button>
-        </li> -->
+        </li>
         <li>
           <el-button type="text" @click="closeOtherLeft" :disabled="false" size="mini">关闭左边</el-button>
         </li>
         <li>
           <el-button type="text" @click="closeOtherRight" :disabled="false" size="mini">关闭右边</el-button>
         </li>
-        <!-- <li>
+        <li>
           <el-button type="text" @click="closeOther" size="mini">关闭其他</el-button>
-        </li> -->
+        </li>
       </ul>
     </div>
   </div>
@@ -37,6 +37,7 @@ export default {
       default: "blank",
     }, //空白路由的name值
   },
+  inject: ["reloads"],
   data() {
     return {
       contextMenuVisible: false, //右键菜单是否显示
@@ -122,9 +123,11 @@ export default {
     reload() {
       this.delRouteCache(this.contextMenuTargetPageRoute.fullPath);
       if (this.contextMenuTargetPageRoute.fullPath === this.$route.fullPath) {
-        this.$router.replace({ name: this.blankRouteName }).then(() => {
-          this.$router.replace(this.contextMenuTargetPageRoute);
-        });
+
+        // this.$router.replace({ name: this.blankRouteName }).then(() => {
+        //   this.$router.replace(this.contextMenuTargetPageRoute);
+        // });
+        this.reloads();
 
       }
     },

src/router/index.js

@@ -50,12 +50,6 @@ export const constantRoutes = [
     component: Layout,
     redirect: '/dashboard',
     children: [
-      //这个是空白页面，重新加载当前页面会用到
-      {
-        name: "blank",
-        path: "/blank",
-        hidden: true, //不在导航栏展示
-      },
       {
         path: 'dashboard',
         name: 'Dashboard',
@@ -64,7 +58,7 @@ export const constantRoutes = [
           title: '病案首页质量分析',
           icon: 'dashboard',
           keepAlive: 1,
-          canMultipleOpen: true //支持根据参数不同多开不同页签，如果你需要/a跟/a?v=123都分别打开两个页签，请设置为true，否则就只会显示一个页签，后打开的会替换到前打开的页签
+          canMultipleOpen: true 
        },
       },
       //全病历质控
@@ -73,35 +67,55 @@ export const constantRoutes = [
         name: 'caseNumber',
         component: () => import('@/views/allcase/caseNumber'),
         hidden: true, //不在导航栏展示
-        meta: { title: '病案数量' },
+        meta: { 
+          title: '病案数量',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/defectNumber',
         name: 'defectNumber',
         component: () => import('@/views/allcase/defectNumber'),
         hidden: true,//不在导航栏展示
-        meta: { title: '缺陷病案'},
+        meta: { 
+          title: '缺陷病案',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/homePage',
         name: 'homePage',
         component: () => import('@/views/allcase/homePage'),
         hidden: true,//不在导航栏展示
-        meta: { title: '出院记录'},
+        meta: { 
+          title: '出院记录',
+          keepAlive: 1,
+          canMultipleOpen: true //支持根据参数不同多开不同页签，如果你需要/a跟/a?v=123都分别打开两个页签，请设置为true，否则就只会显示一个页签，后打开的会替换到前打开的页签
+        },
       },
       {
         path: '/search',
         name: 'Search',
         component: () => import('@/views/search/index'),
         hidden: true,//不在导航栏展示
-        meta: { title: '住院病历查询', keepAlive: 1},
+        meta: { 
+          title: '住院病历查询',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/caseViews',
         name: 'caseViews',
         component: () => import('@/views/allcase/caseViews'),
         hidden: true,//不在导航栏展示
-        meta: { title: '出院记录'},
+        meta: { 
+          title: '出院记录',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       //首页数据质控
       {
@@ -109,77 +123,121 @@ export const constantRoutes = [
         name: 'defectList',
         component: () => import('@/views/data/medicalRecords/defectList'),
         hidden: true,//不在导航栏展示
-        meta: { title: '质量分析缺陷病案', keepAlive:1 }
+        meta: { 
+          title: '质量分析缺陷病案',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        }
       },
       {
         path: '/medicalRecords',
         name: 'medicalRecords',
         component: () => import('@/views/data/medicalRecords'),
         hidden: true, //不在导航栏展示
-        meta: { title: '质量分析病案数量',keepAlive:1 }
+        meta: { 
+          title: '质量分析病案数量',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        }
       },
       {
         path: '/errorList',
         name: 'errorList',
         component: () => import('@/views/data/medicalRecords/errorList'),
         hidden: true, //不在导航栏展示
-        meta: { title: '病案数' }
+        meta: { 
+          title: '病案数',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        }
       },
       {
         path: '/department',
         name: 'department',
         component: () => import('@/views/data/medicalRecords/department'),
         hidden: true, //不在导航栏展示
-        meta: { title: '总缺陷'}
+        meta: { 
+          title: '总缺陷',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        }
       },
       {
         path: '/TotalRankingList',
         name: 'TotalRankingList',
         component: () => import('@/views/data/frontHome/TotalRankingList'),
         hidden: true, //不在导航栏展示
-        meta: { title: '总排名' },
+        meta: { 
+          title: '总排名',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/defectProblem',
         name: 'DefectProblem',
         component: () => import('@/views/data/frontHome/defectProblem'),
         hidden: true, //不在导航栏展示
-        meta: { title: '缺陷问题' },
+        meta: { 
+          title: '缺陷问题',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/defectRuleProblem',
         name: 'DefectRuleProblem',
         component: () => import('@/views/data/frontHome/defectRuleProblem'),
         hidden: true, //不在导航栏展示
-        meta: { title: '缺陷问题详情' },
+        meta: { 
+          title: '缺陷问题详情',
+          keepAlive: 1,
+          canMultipleOpen: true
+        },
       },
       {
         path: '/codeList',
         name: 'codeList',
         component: () => import('@/views/data/medicalRecords/codeList'),
         hidden: true, //不在导航栏展示
-        meta: { title: '编码员' }
+        meta: { 
+          title: '编码员',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        }
       },
       {
         path: '/details',
         name: 'details',
         component: () => import('@/views/data/query/details'),
         hidden: true, //不在导航栏展示
-        meta: { title: '病案首页质控详情' }
+        meta: { 
+          title: '病案首页质控详情',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        }
       },
       {
         path: '/ChargeDetails',
         name: 'ChargeDetails',
         hidden: true, //不在导航栏展示
         component: () => import('@/views/data/query/ChargeDetails'),
-        meta: { title: '费用明细' }
+        meta: { 
+          title: '费用明细',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        }
       },
       {
         path: '/StatementList',
         name: 'StatementList',
         component: () => import('@/views/SettlementList/StatementList'),
         hidden: true,//不在导航栏展示
-        meta: { title: '结算清单数量'}
+        meta: { 
+          title: '结算清单数量',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        }
       },
       // 医保结算清单
       {
@@ -187,90 +245,144 @@ export const constantRoutes = [
         name: 'SetDetails',
         component: () => import('@/views/SettlementList/SetDetails'),
         hidden: true,//不在导航栏展示
-        meta: { title: '医保结算单病案数量' }
+        meta: { 
+          title: '医保结算单病案数量',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        }
       },
       {
         path: '/StatementListquery',
         name: 'StatementListquery',
         component: () => import('@/views/SettlementList/StatementListquery'),
         hidden: true,//不在导航栏展示
-        meta: { title: '医保结算单病案数量'}
+        meta: { 
+          title: '医保结算单病案数量',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        }
       },
       {
         path: '/defectStatementList',
         name: 'defectStatementList',
         hidden: true,//不在导航栏展示
         component: () => import('@/views/SettlementList/defectStatementList'),
-        meta: { title: '缺陷结算清单数量'}
+        meta: { 
+          title: '缺陷结算清单数量',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        }
       },
       {
         path: '/caseIndex',
         name: 'caseIndex',
         component: () => import('@/views/allcase/caseIndex'),
         hidden: true,
-        meta: { title: '病案管理质量控制指标', keepAlive:1},
+        meta: { 
+          title: '病案管理质量控制指标',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/caseIndexList',
         name: 'caseIndexList',
         component: () => import('@/views/allcase/caseIndexList'),
         hidden: true,
-        meta: { title: '病案管理质量控制指标列表', keepAlive:1 },
+        meta: { 
+          title: '病案管理质量控制指标列表',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/caseIndexAnalysis',
         name: 'CaseIndexAnalysis',
         component: () => import('@/views/allcase/caseIndexAnalysis'),
         hidden: true,
-        meta: { title: '评审评价指标分析', keepAlive:1 },
+        meta: { 
+          title: '评审评价指标分析',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/caseIndexAnalysisList',
         name: 'CaseIndexAnalysisList',
         component: () => import('@/views/allcase/caseIndexAnalysisList'),
-        meta: { title: '评审评价指标分析-科室病案' },
         hidden: true,
+        meta: { 
+          title: '评审评价指标分析-科室病案',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        }
       },
       {
         path: '/searchSystem',
         name: 'SearchSystem',
         component: () => import('@/views/searchSystem/index'),
         hidden: true,
-        meta: { title: '医院大数据自助查询系统', keepAlive:true,  icon: 'dashboard' },
+        meta: { 
+          title: '医院大数据自助查询系统',
+          icon: 'dashboard',
+          keepAlive: 1,
+          canMultipleOpen: true   
+        },
       },
       {
         path: '/outpatientCase',
         name: 'OutpatientCase',
         component: () => import('@/views/outpatient/case'),
-        meta: { title: '门诊病历查询' },
         hidden: true,
+        meta: { 
+          title: '门诊病历查询',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
+        
       },
       {
         path: '/outpatientControl',
         name: 'OutpatientControl',
         component: () => import('@/views/outpatient/control'),
-        meta: { title: '门诊病历质控' },
+        meta: { 
+          title: '门诊病历质控',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
         hidden: true,
       },
       {
         path: '/outpatientMedicalRecordDefectNumber',
         name: 'OutpatientMedicalRecordDefectNumber',
         component: () => import('@/views/outpatient/control/defectNumber'),
-        meta: { title: '门诊病历', keepAlive: true },
+        meta: { 
+          title: '门诊病历', 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
         hidden: true,
       },
       {
         path: '/outpatientMedicalShouldDefectNumber',
         name: 'OutpatientMedicalShouldDefectNumber',
         component: () => import('@/views/outpatient/control/shouldDefectNumber'),
-        meta: { title: '门诊应有病历', keepAlive: true },
+        meta: { 
+          title: '门诊应有病历',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
         hidden: true,
       },
       {
         path: '/outpatientMedicalRecordDetail',
         name: 'OutpatientMedicalRecordDetail',
         component: () => import('@/views/outpatient/control/detail'),
-        meta: { title: '门诊病历详情' },
+        meta: { 
+          title: '门诊病历详情',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
         hidden: true,
       },
       {
@@ -278,49 +390,76 @@ export const constantRoutes = [
         name: 'reviewIndicators',
         component: () => import('@/views/allcase/reviewIndicators.vue'),
         hidden: true,
-        meta: { title: '评审指标', keepAlive:true},
+        meta: { 
+          title: '评审指标', 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/reviewIndicatorsList',
         name: 'reviewIndicatorsList',
         component: () => import('@/views/allcase/reviewIndicatorsList.vue'),
         hidden: true,
-        meta: { title: '指标列表', keepAlive:false },
+        meta: { 
+          title: '指标列表', 
+          keepAlive: 1,
+        },
       },
       {
         path: '/yypsIndexAnalysis',
         name: 'YypsIndexAnalysis',
         component: () => import('@/views/yyps/analysis/index.vue'),
         hidden: true,
-        meta: { title: '指标分析', keepAlive:true },
+        meta: {
+          title: '指标分析', 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/yypsIndexAnalysisList',
         name: 'YypsIndexAnalysisList',
         component: () => import('@/views/yyps/analysis/list.vue'),
         hidden: true,
-        meta: { title: '指标分析-科室病案', keepAlive:true },
+        meta: { 
+          title: '指标分析-科室病案',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/yypsIndex',
         name: 'yypsIndex',
         component: () => import('@/views/yyps/index/index.vue'),
         hidden: true,
-        meta: { title: '评审指标', keepAlive:true},
+        meta: { 
+          title: '评审指标', 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/middleCaseNumber',
         name: 'MiddleCaseNumber',
         component: () => import('@/views/middleCaseControl/caseNumber'),
         hidden: true, //不在导航栏展示
-        meta: { title: '病案数量' },
+        meta: { 
+          title: '病案数量',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/middleDefectNumber',
         name: 'MiddleDefectNumber',
         component: () => import('@/views/middleCaseControl/defectNumber'),
         hidden: true,//不在导航栏展示
-        meta: { title: '缺陷病案'},
+        meta: { 
+          title: '缺陷病案',
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
     ],
   },
@@ -335,26 +474,41 @@ export const constantRoutes = [
         path: '/hospital-search',
         name: 'HospitalSearch',
         component: () => import('@/views/searchSystem/index'),
-        meta: { keepAlive:true },
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
         hidden: true
       },
       {
         path: '/hospital-caseViews',
         name: 'HospitalCaseViews',
         component: () => import('@/views/allcase/caseViews'),
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
         hidden: true
       },
       {
         path: '/hospital-details',
         name: 'HospitalDetails',
         component: () => import('@/views/data/query/details'),
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
         hidden: true
       },
       {
         path: '/hospital-chargeDetails',
         name: 'HospitalChargeDetails',
         hidden: true,
-        component: () => import('@/views/data/query/ChargeDetails')
+        component: () => import('@/views/data/query/ChargeDetails'),
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
     ]
   },
@@ -368,31 +522,50 @@ export const constantRoutes = [
         path: '/embedIndex-home',
         name: 'EmbedIndexHome',
         component: () => import('@/views/embedIndex/index'),
-        meta: { keepAlive: true },
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
         hidden: true
       },
       {
         path: '/embedIndex-caseIndexAnalysisList',
         name: 'EmbedIndexCaseIndexAnalysisList',
         component: () => import('@/views/allcase/caseIndexAnalysisList'),
-        hidden: true
+        hidden: true,
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/embedIndex-caseIndexList',
         name: 'EmbedIndexCaseIndexList',
         component: () => import('@/views/allcase/caseIndexList'),
         hidden: true,
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/embedIndex-caseViews',
         name: 'EmbedIndexCaseViews',
         component: () => import('@/views/allcase/caseViews'),
-        hidden: true
+        hidden: true,
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/embedIndex-chargeDetails',
         name: 'EmbedIndexChargeDetails',
         hidden: true,
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
         component: () => import('@/views/data/query/ChargeDetails')
       }
     ]
@@ -407,7 +580,10 @@ export const constantRoutes = [
         path: '/reviewIndex-home',
         name: 'ReviewIndex',
         component: () => import('@/views/reviewIndex/index'),
-        meta: { keepAlive: true },
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
         hidden: true
       },
       {
@@ -415,25 +591,41 @@ export const constantRoutes = [
         name: 'ReviewIndexCaseIndexList',
         component: () => import('@/views/allcase/caseIndexList'),
         hidden: true,
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/reviewIndex-caseViews',
         name: 'ReviewIndexCaseViews',
         component: () => import('@/views/allcase/caseViews'),
-        hidden: true
+        hidden: true,
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/reviewIndex-yypsIndexAnalysisList',
         name: 'ReviewYypsIndexAnalysisList',
         component: () => import('@/views/yyps/analysis/list.vue'),
         hidden: true,
-        meta: { title: '指标分析-科室病案', keepAlive:true },
+        meta: { 
+          title: '指标分析-科室病案',
+          keepAlive: 1,
+          canMultipleOpen: true
+        },
       },
       {
         path: '/reviewIndex-chargeDetails',
         name: 'ReviewIndexChargeDetails',
         hidden: true,
-        component: () => import('@/views/data/query/ChargeDetails')
+        component: () => import('@/views/data/query/ChargeDetails'),
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       }
     ]
   },
@@ -446,32 +638,51 @@ export const constantRoutes = [
         path: '/whitelist-search',
         name: 'WhitelistSearch',
         component: () => import('@/views/searchSystem/index'),
-        meta: { keepAlive:true },
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
         hidden: true
       },
       {
         path: '/whitelist-caseViews',
         name: 'WhitelistCaseViews',
         component: () => import('@/views/allcase/caseViews'),
-        hidden: true
+        hidden: true,
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/whitelist-chargeDetails',
         name: 'WhitelistChargeDetails',
         hidden: true,
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
         component: () => import('@/views/data/query/ChargeDetails')
       },
       {
         path: '/whitelist-details',
         name: 'WhitelistDetails',
         component: () => import('@/views/data/query/details'),
-        hidden: true
+        hidden: true,
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
       {
         path: '/whitelist-caseControl',
         name: 'WhitelistCaseControl',
         component: () => import('@/views/allcase/caseControl'),
-        hidden: true
+        hidden: true,
+        meta: { 
+          keepAlive: 1,
+          canMultipleOpen: true 
+        },
       },
     ]
   }