博客

如何判断用户当前是使用移动端还是PC端

在Vue项目中我们会遇到移动端和PC端展现不同界面的情况，那么我们怎么判断用户此时是使用什么设备来浏览我们的页面呢？

可以直接复制以下代码到App.vue 文件

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {
    _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;
    }
  },
  //App.vue
  mounted() {
    if (this._isMobile()) {
      // alert("手机端");
      //跳转到你手机路由
      this.$router.replace("/m_index");
    } else {
      // alert("pc端");
      //跳转到PC端路由
      this.$router.replace("/main");
    }
  }
};
</script>

<style>
#app {
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
  overflow: -Scroll;
  overflow-x: hidden;
}
</style>