Vue.js如何在项目中判断用户终端打开是提供电脑端还是移动端，可以这样操作

开篇寄语

继续深化Vue.js这个Web框架的学习，今天伯衡君遇到的一个问题是如何通过判断用户访问网站后判断是电脑端还是移动端，以展示不同的画面，伯衡君查看了Javascript相关内容，又看了一下Vue3的指导文档，同时结合屏幕的大小来判断更为精准，那么该如何操作呢？请看本篇文章。

前情提要

• 《Vue.js用Cli建立的项目如何更改全局字体，可以这样操作》
• 《Vuejs中组件开发从初级到高级（一）》
• 《Vuejs中组件开发从初级到高级（二）》
• 《Vuejs中各种"v-xxx"都是什么，一篇带示例的文章让你搞清楚》
• 《Vuejs中的methods, computed和watch有何妙用？》

内容详情

本篇以Vue3版本为例，虽然与Vue2差别并不是很大。

这里涉及到两个Javascript的判断标准，一个是navigator.userAgent，一个是window.screen.width，前者是判断设备终端，后者是判断屏幕大小。

如果是想在Vue cli项目中实现全局判断，只需要在App.vue这样书写：

export default {
  name: "app",
  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
      );
      if (window.screen.width < 1024) {
        return flag && true;
      } else {
        return flag && false;
      }
    },
  },
  mounted: function () {
    if (this._isMobile()) {
      this.$router.replace("/mobile");
    } else {
      this.$router.replace("/computer");
    }
  },
};

在路由文件夹下，伯衡君已经提前建立好了mobile.vue和computer.vue这两个文件，如下图所示：

之后在index.js加上它们两个文件的路由地址就可以了，如下所示：

const routes = [{
        path: '/mobile',
        name: 'mobile',
        component: Mobile,
    }, {
        path: '/computer',
        name: 'computer',
        component: Computer,
    },
]

这样就可以给用户提供不同终端或者分辨率访问的内容了。