首页导航调整

src/components/app-breadcrumb/app-breadcrumb.vue

 <template>
     <el-breadcrumb class="app-breadcrumb"  separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item, index) in breadcrumbs"  :key="item.id">
-        <span v-if="index === breadcrumbs.length-1" class="no-redirect">{{ item.title }}
-          <span v-if="item.isselected === true">
-            <dropdown trigger='click' @on-click="selectNavData($event,item)">
-              <span class="app-breadcrumb-selected">
-                  <i class="el-icon-caret-bottom"></i>
-              </span>
-              <dropdown-menu slot='list'>                 
-                <dropdown-item v-for="(dataitem) in getPreNavData(item)" :name="dataitem.srfkey" :key="dataitem.srfkey">
-                  <span :class="{'curselected':isCurSelected(item,dataitem)}">{{dataitem.srfmajortext}}</span>  
-                </dropdown-item>                    
-              </dropdown-menu>
-            </dropdown>
+      <template v-if="Object.is(this.navModel,'route')">
+        <el-breadcrumb-item v-for="(item, index) in breadcrumbs"  :key="item.id">
+          <span v-if="index === breadcrumbs.length-1" class="no-redirect">{{ item.title }}
+            <span v-if="item.isselected === true">
+              <dropdown trigger='click' @on-click="selectNavData($event,item)">
+                <span class="app-breadcrumb-selected">
+                    <i class="el-icon-caret-bottom"></i>
+                </span>
+                <dropdown-menu slot='list'>                 
+                  <dropdown-item v-for="(dataitem) in getPreNavData(item)" :name="dataitem.srfkey" :key="dataitem.srfkey">
+                    <span :class="{'curselected':isCurSelected(item,dataitem)}">{{dataitem.srfmajortext}}</span>  
+                  </dropdown-item>                    
+                </dropdown-menu>
+              </dropdown>
+            </span>
           </span>
-        </span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.title }}</a>
-      </el-breadcrumb-item>
+          <a v-else @click.prevent="handleLink(item)">{{ item.title }}</a>
+        </el-breadcrumb-item>
+      </template>
+      <template v-if="!Object.is(this.navModel,'route')">
+        <el-breadcrumb-item v-for="(item, index) in breadcrumbs"  :key="item.path">
+          <span v-if="index === breadcrumbs.length-1" class="no-redirect" >{{ $t(item.meta.caption)}}</span>
+          <a v-else @click.prevent="handleLink(item)" >{{ $t(item.meta.caption) }}</a>
+        </el-breadcrumb-item>
+      </template>
     </transition-group>
   </el-breadcrumb>
 </template>
@@ -54,6 +62,24 @@ export default class Breadcrumb extends Vue {
    */
   @Prop() public indexViewTag!: string;
 
+  /**
+   * 导航模式
+   *
+   * @memberof Breadcrumb
+   */
+  @Prop({default:'tab'}) public navModel?:string;
+
+  /**
+   * 监听路由
+   *
+   * @memberof Breadcrumb
+   */
+  @Watch('$route')
+  private onRouteChange(route: Route) {
+    this.getBreadcrumb()
+  }
+
+
   /**
     * 导航服务事件
     *
@@ -70,11 +96,13 @@ export default class Breadcrumb extends Vue {
    */
   created() {
     this.getBreadcrumb();
-    this.serviceStateEvent = this.navDataService.serviceState.subscribe(({ action,name, data }:{ action:string,name:any,data:any }) => {
-      if (Object.is(action, 'datarefresh')) {
-          this.getBreadcrumb();
-      }
-    });
+    if(Object.is(this.navModel,"route")){
+      this.serviceStateEvent = this.navDataService.serviceState.subscribe(({ action,name, data }:{ action:string,name:any,data:any }) => {
+        if (Object.is(action, 'datarefresh')) {
+            this.getBreadcrumb();
+        }
+      });
+    }
   }
 
   /**
@@ -83,8 +111,14 @@ export default class Breadcrumb extends Vue {
    * @memberof Breadcrumb
    */
   private getBreadcrumb() {
-    this.breadcrumbs = this.navDataService.getNavData();
-    this.$forceUpdate();
+    if(Object.is(this.navModel,"route")){
+      this.breadcrumbs = this.navDataService.getNavData();
+      this.$forceUpdate();
+    }else{
+      this.breadcrumbs = this.$route.matched.filter((item) => {
+        return item.meta && item.meta.caption
+      })
+    }
   }
 
   /**
@@ -112,16 +146,31 @@ export default class Breadcrumb extends Vue {
    * @memberof Breadcrumb
    */
   private handleLink(item: any) {
-    // 首页
-    if(Object.is(item.id,this.indexViewTag)){
-      this.$router.push((window.sessionStorage.getItem(Environment.AppName))as string);
+    if(Object.is(this.navModel,"route")){
+      // 首页
+      if(Object.is(item.id,this.indexViewTag)){
+        this.$router.push((window.sessionStorage.getItem(Environment.AppName))as string);
+      }else{
+        // 非首页
+        this.$router.push(item.path).catch(err => {
+          console.warn(err);
+        });
+      }
+      this.navDataService.removeNavData(item.id);
     }else{
-      // 非首页
-      this.$router.push(item.path).catch(err => {
-        console.warn(err);
-      });
+      if(item && item.meta && item.meta.viewType && Object.is(item.meta.viewType,"APPINDEX")){
+        let path: string | null = window.sessionStorage.getItem(Environment.AppName);
+        if (path) {
+          this.$router.push({ path: path });
+        } else {
+          this.$router.push("/");
+        }
+      }else{
+        this.$router.push(item).catch(err => {
+          console.warn(err);
+        });
+      }
     }
-    this.navDataService.removeNavData(item.id);
   }
 
   /**

src/service/app/navdata-service.ts

@@ -228,6 +228,24 @@ export default class NavDataService {
         }
     }
 
+    /**
+     * 从导航数据栈中删除指定数据上层数据(不清除页面缓存)
+     * 
+     * @memberof NavDataService
+     */
+    public removeNavDataWithoutCache(id:string){
+        if(this.navDataStack.length >0){
+            let tempIndex:number = this.navDataStack.findIndex((element:NavDataElement) =>{
+                return Object.is(element.id,id);
+            })
+            let removeNavData = this.navDataStack.splice(tempIndex+1);
+            this.sessionStore.setItem('srfnavdata',JSON.stringify(this.navDataStack));
+            return removeNavData;
+        }else{
+            return null;
+        }
+    }
+
     /**
      * 从导航数据栈中获取指定数据
      *