hmvue/src/App.vue

<template>
    <div id="app">
<!--        <header class="bar bar-nav d-flex justify-content-between align-items-center p-2">-->
<!--            <el-button type="text" icon="el-icon-arrow-left" v-on:click="goBack"-->
<!--                       v-if="$route.meta.showBackLeftBtn"></el-button>-->
<!--&lt;!&ndash;            <h4 class="title">{{title}}</h4>&ndash;&gt;-->
<!--            <el-button type="text"><span v-if="$route.meta.showBarRightBtn">编辑</span></el-button>-->
<!--        </header>-->
        <keep-alive>
            <router-view class="app-body" v-if="$route.meta.keepAlive"/>
        </keep-alive>
        <router-view class="app-body" v-if="!$route.meta.keepAlive"/>
        <div class="tab-nav nav-bar" v-if="$route.meta.showTab">
                <a  href="javascript:;" v-for="(i,index) in data.tabs" :key="index" :class="{active:index == data.thatnum}" @click="addClassName(index)">
                    <router-link :to="i.url">
                        <img v-if="data.thatnum!=index"  :src="i.img"    class="first weui-tabbar__icon">
                        <img v-if="data.thatnum==index"  :src="i.active" class="last first weui-tabbar__icon">
                    </router-link>
                </a>
        </div>
    </div>
</template>

<script lang="ts" >
    import {Component,Vue} from "vue-property-decorator";
    import router from "@/router";
    import Utils from './extend/Utils';

    @Component({})
    export default class App extends Vue {
         public data:any= {
             thatnum: -1,
             tabs:[
                 {url:'/index',img:require('./assets/image/label_01.png'),active:require('./assets/image/label-2_01.png')},
                 {url:'/other',img:require('./assets/image/label_02.png'),active:require('./assets/image/label-2_02.png')},
                 {url:'/user',img:require('./assets/image/label_03.png'),active:require('./assets/image/label-2_03.png')}
             ]
         }
        addClassName(index) {
            this.data.thatnum = index;
        }
        public get title() {
            return this.$route.meta.title;
        }

        public goBack() {
            router.back();
        }

    }
</script>

<style lang="scss">
    @import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
    @import '@/assets/scss/common.scss';

    #app {
        position: relative;
        min-height: 100%;
        background: white;
    }

    #app > div:first-child {
        font-size: 1.2rem;
    }
    .nav-ul{
        display: flex;
        width: 100%;
    }

    .tab-nav {
        position: fixed;
        display: flex;
        justify-content: space-between;
        bottom: 0;
        left: 0;
        right: 0;
        border-bottom: 0;
        border-top: 1px solid #f0f0f0;
        background: #fff;
        z-index: 999;
        img{
            width: 100%;
        }
    }

    .app-body {
        /*margin-top: 45px;*/
        /*margin-bottom: 5rem;*/
        overflow: hidden;
    }

    .bar-nav .title {
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
    }
    body .el-message-box {
        width: 300px;
    }

</style>