【Vue】判断访问设备是移动端还是pc端

想要查看前面的笔记请翻阅我的CSDN博客，作者码字不易，喜欢的话点赞，加个关注吧，后期还有很多干货等着你！

---

前言

使用navigator.userAgent进行判断，获取访问设备是什么

一、navigator是什么？

属于Browser 对象：Navigator 对象包含有关浏览器的信息。

属性	说明
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent 头部的值

二、使用步骤

1.在methods中使用

      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)
      // localStorage.setItem('isiphone',flag)
      console.log(flag)
      return flag;
    }

  }

2. 在你需要使用的地方引入

    if (this.isMobile()) {
      console.log("移动端");
    } else {
      console.log("pc端");
      this.$router.replace('/pcindex');
    }

总结

Browser 对象还有大量可用数据,请按需查看

名称	作用
Window 对象	Window 对象表示浏览器中打开的窗口。
Navigator 对象	Navigator 对象包含有关浏览器的信息。
Screen 对象	Screen 对象包含有关客户端显示屏幕的信息。
History 对象	History 对象包含用户（在浏览器窗口中）访问过的 URL。
Location 对象	Location 对象包含有关当前 URL 的信息。
存储对象	Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。