优化多页签

src/layout/components/AppMain.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="app-main">
     <div v-if="!$route.meta.nocrumb">
-      <breadcrumb :keep-alive-component-instance="keepAliveComponentInstance" class="breadcrumb-container" />
+      <breadcrumb :keep-alive-component-instance="keepAliveComponentInstance" :t_name="t_name" class="breadcrumb-container" />
     </div>
     <div ref="keepAliveContainer">
       <keep-alive>
@@ -26,13 +26,15 @@ export default {
   provide () {
     // 父组件中通过provide来提供变量，在子组件中通过inject来注入。
     return {
-      reloads: this.reloads
+      reloads: this.reloads,
+      t_title: this.t_title
     };
   },
   data() {
     return {
       keepAliveComponentInstance: null,
-      isRouterAlive: true
+      isRouterAlive: true,
+      t_name:''
     };
   },
   methods:{
@@ -42,6 +44,9 @@ export default {
         this.isRouterAlive = true;
       });
     },
+    t_title(e){
+      this.t_name = e;
+    }
 
   },
   mounted() {

src/layout/components/Breadcrumb.vue

@@ -5,7 +5,7 @@
     <div class="mianscroll" ref="mianscroll">
       <div class="__tabs">
         <div class="__tab-item" v-for="item in openedPageRouters" :class="{'__is-active': item.fullPath == $route.fullPath,}" :key="item.fullPath" @click="onClick($event,item)" @contextmenu.prevent="showContextMenu($event, item)">
-          {{ item.meta.title }} <span v-if="item.meta.xm">- {{ item.meta.xm }}</span>
+          {{ item.meta.title }} <span v-if="item.t_name">-  {{ item.t_name }}</span>
           <span class="el-icon-close" @click.stop="onClose(item)" @contextmenu.prevent.stop="" :style="openedPageRouters.length <= 1 ? 'width:0;' : ''"></span>
         </div>
       </div>
@@ -38,6 +38,7 @@ export default {
       type: String,
       default: "blank",
     }, //空白路由的name值
+    t_name:''
   },
   inject: ["reloads"],
   data() {
@@ -84,26 +85,32 @@ export default {
     //打开页面
     openPage(route) {
       this.contextMenuTargetPageRoute = route;
-      if (route.name == this.blankRouteName) {
+      let new_route = {};
+      for(let key in route){
+        new_route[key] = route[key];
+      }
+      new_route.t_name = this.t_name;
+
+      if (new_route.name == this.blankRouteName) {
         return;
       }
       let isExist = this.openedPageRouters.some(
-        (item) => item.fullPath == route.fullPath
+        (item) => item.fullPath == new_route.fullPath
       );
       if (!isExist) {
         let openedPageRoute = this.openedPageRouters.find(
-          (item) => item.path == route.path
+          (item) => item.path == new_route.path
         );
         //判断页面是否支持不同参数多开页面功能，如果不支持且已存在path值一样的页面路由，那就替换它
-        if (!route.meta.canMultipleOpen && openedPageRoute != null) {
+        if (!new_route.meta.canMultipleOpen && openedPageRoute != null) {
           this.delRouteCache(openedPageRoute.fullPath);
           this.openedPageRouters.splice(
             this.openedPageRouters.indexOf(openedPageRoute),
             1,
-            route
+            new_route
           );
         } else {
-          this.openedPageRouters.push(route);
+          this.openedPageRouters.push(new_route);
         }
         this.bottomScrollClick();
       }
@@ -146,7 +153,6 @@ export default {
         //   this.$router.replace(this.contextMenuTargetPageRoute);
         // });
         this.reloads();
-
       }
     },
     //关闭其他页面

src/router/index.js

@@ -381,8 +381,7 @@ export const constantRoutes = [
         component: () => import('@/views/outpatient/control/detail'),
         meta: { 
           title: '门诊病历详情',
-          xm:'',
-          keepAlive: 0,
+          keepAlive: 1,
           canMultipleOpen: true 
         },
         hidden: true,

src/views/outpatient/control/detail.vue

@@ -90,6 +90,7 @@ export default {
   components: {
     CaseQualityBox
   },
+  inject: ["t_title"],
   data() {
     return {
       data: {
@@ -127,7 +128,8 @@ export default {
     getDetails() {
       this.$axios.post('/omr_zk/omr_info', { blbh: this.$route.query.blbh }).then(res => {
         this.data = res.data;
-        this.$route.meta.xm = res.data.xm;
+        this.t_title(res.data.xm);
+
       });
     }
   }