<template> <div :class="curClassName" :style="curStyle"> <template v-if="dynaNavMode === 'ROUTEVIEW'"> <template v-if="enableCache"> <app-keep-alive :routerList="routerList"> <router-view :key="routerViewKey"></router-view> </app-keep-alive> </template> <router-view v-else :key="routerViewKey"></router-view> </template> <component class="view-container2" v-if="navData && navData.navView" :is="navData.navView" :viewDefaultUsage="false" :viewdata="JSON.stringify(navData.srfnavdata.context)" :viewparam="JSON.stringify(navData.srfnavdata.viewparmas)" @viewdataschange="handleViewEvent" @viewLoaded="handleViewEvent" @viewstatechange="handleViewEvent"> </component> </div> </template> <script lang="ts"> import { Component, Prop, Vue } from "vue-property-decorator"; @Component({}) export default class AppNavPos extends Vue { /** * 名称 * * @type {string} * @memberof AppNavPos */ @Prop() public name!: string; /** * 布局模型详情 * * @type {*} * @memberof AppNavPos */ @Prop() public layoutModelDetails: any; /** * 导航数据 * * @type {*} * @memberof AppNavPos */ @Prop() public navData: any; /** * 当前布局模型 * * @type {*} * @memberof AppNavPos */ public currentLayoutModel: any; /** * 获取动态导航模式(DYNAMICCOMP:动态组件 ROUTEVIEW:路由出口) * * @type {"DYNAMICCOMP" | "ROUTEVIEW"} * @memberof AppNavPos */ get dynaNavMode(): "DYNAMICCOMP" | "ROUTEVIEW" { const currentModel = this.layoutModelDetails[this.name]; if (currentModel && currentModel.dynaNavMode) { return currentModel.dynaNavMode; } return 'DYNAMICCOMP'; } /** * 是否启用动态缓存 * * @type {boolean} * @memberof AppNavPos */ get enableCache(): boolean { const currentModel = this.layoutModelDetails[this.name]; if (currentModel) { return currentModel.enableCache; } return false; } /** * 路由列表 * * @memberof AppNavPos */ get routerList() { return this.$store.state.historyPathList; } /** * 路由键值 * * @memberof AppNavPos */ get routerViewKey() { let _this: any = this; return _this.$route.fullPath; } /** * 当前容器类名 * * @memberof AppNavPos */ get curClassName() { return { 'app-nav-pos': true, [this.name]: true, [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false } } /** * 当前容器样式 * * @memberof AppNavPos */ get curStyle() { if (this.currentLayoutModel) { return this.currentLayoutModel.getElementStyle(); } return ''; } /** * Vue生命周期 --- created * * @memberof AppNavPos */ created() { this.currentLayoutModel = this.layoutModelDetails[this.name]; } /** * 执行视图事件 * * @param {*} args * @memberof AppNavPos */ public handleViewEvent(args: any) { console.log(args); } } </script> <style lang='less'> @import './app-nav-pos.less'; </style>