xy-frontend/src/App.vue

<template>
  <div id="app" :class="mobelH == 1 ? 'zoomclass' : ''">
    <router-view></router-view>
  </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  name: "App",
  data() {
    return { mobelH: 0 };
  },
  mounted() {
    this.isMobile2();
    let goUrl = this.isMobile();

    if (goUrl === 1) {
      this.$confirm(
        "您正在使用手机访问本站，可能无法获得最佳浏览体验， 即将跳转到手机端...",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          customClass: "phonemesBox",
        }
      )
        .then(() => {
          // this.$message({
          //   type: "success",
          //   message: "删除成功!",
          // });
          //移动端地址
          location = "http://61.169.135.146:40080/phone/#/login";
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    }
  },
  methods: {
    ...mapActions("cache", ["addCache", "removeCache"]),
    // 收集缓存（通过监听）
    collectCaches() {
      // 收集当前路由相关的缓存
      this.$route.matched.forEach((routeMatch) => {
        const instance = routeMatch.components?.default;
        const componentName = instance?.name;
        console.log(componentName);
        if (process.env.NODE_ENV === "development") {
          this.checkRouteComponentName(componentName, instance?.__file);
        }
        // 配置了meta.keepAlive的路由组件添加到缓存
        if (routeMatch.meta.keepAlive) {
          if (!componentName) {
            console.warn(`${routeMatch.path} 路由的组件名称name为空`);
            return;
          }
          this.addCache(componentName);
        } else {
          this.removeCache(componentName);
        }
      });
    },
    // 检测路由组件名称是否重复（组件重名会缓存到不该缓存的组件，而且不容易排查问题，所以开发环境时检测重名）
    checkRouteComponentName(name, file) {
      if (!this.cmpNames) this.cmpNames = {};
      if (this.cmpNames[name]) {
        if (this.cmpNames[name] !== file) {
          console.warn(
            `${file} 与${this.cmpNames[name]} 组件名称重复： ${name}`
          );
        }
      } else {
        this.cmpNames[name] = file;
      }
    },
    isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      // localStorage.setItem('isiphone',flag)
      localStorage.setItem("ismobile", flag ? 1 : 0);
      let goUrl = flag ? 1 : 0;
      return goUrl;
    },
    isMobile2() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      // localStorage.setItem('isiphone',flag)
      this.mobelH = flag ? 1 : 0;
    },
  },
  watch: {
    "$route.path": {
      immediate: true,
      handler() {
        this.collectCaches();
      },
    },
  },
};
</script>

<style lang="less">
.phonemesBox {
  width: 80% !important;
  max-width: 450px;
}
.zoomclass {
  zoom: 0.6;
}
</style>