playlet/project/src/App.vue

<template>
  <div id="app">
    <div id="warning_sorry" v-if="isIEfalg">
      <div class="app_sorry">抱歉&ensp;&ensp;为了保证产品体验，建议您用其他浏览器！</div>
    </div>
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
import permissionInit from '@/router/permission.js'
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isIEfalg: false,
      isRouterAlive: true,
    }
  },
  created () {
    this.IEVersion()
  },
  mounted () {
  },
  methods: {
    reload () {
      //路由跳转到当前页面时，页面刷新
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      })
    },
    IEVersion () {//判断是否是ie浏览器
      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
      var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
      var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
      var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
      if (isIE) {
        this.isIEfalg = true;
      } else if (isEdge) {
        // return 'edge';//edge
      } else if (isIE11) {
        //IE11
        this.isIEfalg = true;
      }
    },
  }
}
</script>

<style lang="scss">
@import "@/style/common.scss";
#app {
  background: #f5f6f8;
  min-height: 100vh;
  width: 100%;
  font-family: "Noto Sans SC";
}
#warning_sorry {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  width: 40%;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
  box-sizing: border-box;
  color: #333333;
  margin: auto;
  margin-top: 15px;
  position: fixed;
  bottom: 100px;
  left: 0;
  right: 0;
  margin: auto;
  color: #fffff3;
  z-index: 99;
  .right {
    color: #0099cc;
  }
  .app_sorry::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 20px;
    background: red;
    vertical-align: text-bottom;
    margin-right: 10px;
  }
}
</style>