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>
                <!-- <el-row>
                    <el-col :span="8" v-for="(i,index) in data.tabs" :key="index">
                        <a href="javascript:;" :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>
                        
                    </el-col>
                </el-row> -->
        </div>
    </div>
</template>

<script lang="ts" >
    import {Component,Vue} from "vue-property-decorator";
    import router from "@/router";
    import Utils from './extend/Utils';
import login from "./store/module/login";
    var configJson = require('./static/common.json')

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

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

        created() {
            const version = configJson.version;          //版本号（每次上线前需要更新下版本号）
            console.log('最新版本号common.js：',version)
            const clientVersion =localStorage.getItem('_version_')
            console.log('当前版本号app.vue：',clientVersion)
            if(clientVersion !== version){
                let storage = window.localStorage;
                storage.clear()
                this.$router.replace('/login')
                
                localStorage.setItem('_version_', JSON.stringify(version))
            }
        }
        beforeUpdate() {
            const version = configJson.version;          //版本号（每次上线前需要更新下版本号）
            // console.log('修改版本号common.js：',version)
            const clientVersion =localStorage.getItem('_version_')
            // console.log('修改版本号app.vue：',clientVersion)
            if(clientVersion !== version){
                let storage = window.localStorage;
                storage.clear()
                this.$router.replace('/login')
                
                localStorage.setItem('_version_', JSON.stringify(version))
            }
        }

    }
</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;
        // height: 50px;
        img{
            width: 100%;
            // height: 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;
    }
    body .el-message {
        min-width: 90%;
    }

</style>