vue项目中判断设备是手机端还是pc端；vue项目中设备为移动端时，使用iframe引入页面移动端页面

1. 在 router/index.js 中有两个页面。

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '',
      redirect: '/pc_index'
    },
    {
      path: "/pc_index", // pc端首页
      name: PcIndex,
      component: resolve => require(['@/views/PCViews/pcIndex.vue'], resolve),
    },
    {
      path: '/m_index', // 手机端首页
      name: MIndex,
      component: resolve => require(['@/views/MViews/mIndex.vue'], resolve),
    }
  ]
})

2. 在 App.vue 的 mounted 和methods方法中对设置进行判断，如下:

  mounted() {
    var that = this;
    window.addEventListener("resize", that.handleSize);
    that.handleSize();
  },
  methods: {
    handleSize() {
      if (this._isMobile()) {
        this.$router.replace("/m_index");
      } else {
        this.$router.replace("/pc_index");
      }
    },
    _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
      );
      return flag;
    },
  },

3. pcIndex.vue

<template>
  <div id="pcIndex">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: "pcIndex",
  props: {},
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isShowLoading: false,
      isRouterAlive: true,
      cascaderTimmer: "",
    };
  },
  watch: {
    $route(route) {
      // if you go to the redirect page, do not update the breadcrumbs
      // console.log(route.path);
    },
  },

  mounted() {
    const that = this;
    //给window添加一个滚动滚动监听事件
    window.addEventListener("load", that.cascaderTimmerChange);
    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0);
    });
    document.onmousedown = function (event) {
      if (window.event && !event) {
        event = window.event;
      }

      var ref = event.target || event.srcElement;

      if (ref.tagName == "IMG") {
        if (event.button == 2 || event.button == 3) {
          alert("对不起,本网站不提供图片右键功能,谢谢您的理解和支持!");

          return false;
        }
      }
    };
   
  },
  methods: {
    cascaderTimmerChange() {
      //点击文本就让它自动点击前面的input就可以触发选择。但是因组件阻止了冒泡，暂时想不到好方法来触发。
      //这种比较耗性能，暂时想不到其他的，能实现效果了。
      this.cascaderTimmer = setInterval(function () {
        document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
          el.onclick = function () {
            if (this.previousElementSibling)
              this.previousElementSibling.click();
          };
        });
      }, 1000);
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 60) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
  },
  destroyed() {
    // clearInterval(this.cascaderTimmer)
    //离开该页面需要移除这个监听的事件
    window.removeEventListener("scroll", this.cascaderTimmerChange);
    Vue.ls.remove("ruleForm1");
    Vue.ls.remove("ruleForm2");
  },
};
</script>
<style lang="less" scoped>
body {
  font-family: Microsoft YaHei ",微软雅黑,宋体";
}
#pcIndex {
  height: 100%;
}
</style>

4. mIndex.vue

<template>
  <div id="mIndex">
    <iframe
      id="template-iframe"
      ref="iframe"
      :src="src"
      scroll="no"
      marginwidth="0px"
      frameborder="0"
      @load="loaded"
    ></iframe>
  </div>
</template>

<script>
export default {
  name: "mIndex",
  props: {},
  data() {
    return {
      iframeWin: "",
    };
  },
  watch: {
    $route(route) {
      // if you go to the redirect page, do not update the breadcrumbs
      // console.log(route.path);
    },
  },
  computed: {
    src() {
      if (process.env.BASE_SYSTEM === "devops_dev") {
        return "http://xxx.xxxxxxx.com/";
      }
      return "https://element.eleme.cn/";
    },
  },
  mounted() {
    const that = this;
    that.iframeWin = that.$refs.iframe.contentWindow;
  },
  methods: {
    loaded() {
      const cookie = document.cookie;
      this.iframeWin.postMessage(cookie, this.src);
    },
  },
};
</script>
<style lang="less" scoped>
#mIndex {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
#template-iframe {
  width: 100%;
  height: 100%;
}
</style>