item-management-web/src/App.vue

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>
<script>
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload,
    };
  },

  watch: {
    // 监听 $route 对象的变化
    '$route'(to, from) {
      // 防止重复判断设备
      if (this.deviceType =='PC'){
         return;
      }
      //排出手机扫码验证页面
      if (to.path!="/prod/validate"){
        this.detectDeviceType();
      }
    }
  },
  data() {
    return {
      isRouterAlive: true,
      deviceType:null
    };
  },

  created() {
    // 在组件创建时检测设备类型
    //this.detectDeviceType();
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
      //this.noreadCounts()
    },
    // 监听访问网页的设备类型
    detectDeviceType() {
      const userAgent = navigator.userAgent;
      // 判断是否是移动端设备的一般方法
      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
      if (isMobile) {
        // 跳转到移动端
        window.location.replace(process.env.VUE_APP_MOBILE);
      }else{
        this.deviceType='PC';
      }
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
#app {
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.el-table th.gutter {
  display: table-cell !important;
}
</style>