首页导航调整

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

 <template>
     <el-breadcrumb class="app-breadcrumb"  separator="/">
     <transition-group name="breadcrumb">
+      <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">
@@ -18,6 +19,13 @@
           </span>
           <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,12 +96,14 @@ export default class Breadcrumb extends Vue {
    */
   created() {
     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() {
+    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,6 +146,7 @@ export default class Breadcrumb extends Vue {
    * @memberof Breadcrumb
    */
   private handleLink(item: any) {
+    if(Object.is(this.navModel,"route")){
       // 首页
       if(Object.is(item.id,this.indexViewTag)){
         this.$router.push((window.sessionStorage.getItem(Environment.AppName))as string);
@@ -122,6 +157,20 @@ export default class Breadcrumb extends Vue {
         });
       }
       this.navDataService.removeNavData(item.id);
+    }else{
+      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);
+        });
+      }
+    }
   }
 
   /**

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;
+        }
+    }
+
     /**
      * 从导航数据栈中获取指定数据
      *