app-nav-pos.vue

<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>