vue 区分pc以及移动端路由

移动设备应用越来越广泛的今天，许多网站都开始做移动端的界面展示，两者屏幕尺寸差异很大，所以展示的内容也有所差别。于是就遇到一个问题，如何判断你的页面是在移动端还是在PC端打开的。

在App.vue文件中关键代码如下

export default {
  name: "App",
  mounted() {
    if (this.isMobile()) {
      this.$router.push("/mobileIndex");
    } else {
      this.$router.push("/pcIndex");
    }
  },
  methods: {
    isMobile() {
      let flag = navigator.userAgent.match( // match方法可在字符串内检索指定的值，
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      // console.log(flag)
      return flag;
    }
  }
};

通过浏览器navigator判断浏览器版本或者手机类型去跳转不同的路由

 

navigator

•    navigator为Window对象的一个属性，指向了一个包含浏览器相关信息的对象。
•    navigatot中包含了一些常用到的属性，如：
•    navigator.appVersion 浏览器的版本号
•    navigator.appName    浏览器的名称
•    navigator.language   浏览器使用的语言
•    navigator.platform   浏览器使用的平台
•    navigator.userAgent  浏览器的user-agent信息 

搜集了几个常用判断的方法 下面记录下 

// ios设备
var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') ||                                          navigator.userAgent.match('iPod');
// 安卓设备
var isAndroid = navigator.userAgent.match('Android');
// 微信内置浏览器
var isWeChat = navigator.userAgent.match('MicroMessenger');