VUE识别访问设备是pc端还是移动端

本文介绍: 有些网站需要区分手机端网页和pc端网页，做到不同设备访问不同的网页，增强用户的使用体验，可以在app.vue中作一个判断，然后跳转不同的路由。

一、思路

有些网站需要区分手机端网页和pc端网页，做到不同设备访问不同的网页，增强用户的使用体验，可以在app.vue中作一个判断（navigator.userAg ent），然后跳转不同的路由。

二、原理

navigator.use rAg ent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。

例如：Mozilla/5.0 (Win d o ws NT 10.0; WOW64) AppleWe bKi t/537.36 (KHTML, like Gec k o) Ch ro m e/72.0.3626.121 Saf ari/537.36

然后通过match函数判断是否有包含相应移动端设备名称，从而实现区分两者。

浏览器代号: navigator.ap pCod eNa me
浏览器名称: navigator.ap pName
浏览器版本: navigator.ap pVersion
启用Co okies: navigator.cookieEnab led
硬件平台: navigator.plat form
用户代理: navigator.use rAgent
用户代理语言: navigat or.language

三、步骤

1，先在router/index.js 文件中配置好不同端口跳转的路由：

export default new Router({
  routes: [
    {
      path: '',
      redirect: '/pc_index'
    },
    {
      path: "/pc_index", // pc端首页
      name: PcIndex,
      component: PcIndex
    },
    {
      path: '/mb_index', // 移动端首页
      name: MbIndex,
      component: MbIndex
    }
  ]
});

2，在App.vue中做出判断，并跳转路由即可：

 mounted () {
    // 根据不同路由跳转不同页面
    if (this._isMobile()) {
      console.log('手机端')
      this.$router.replace('/mb_index')
    } else {
      console.log('pc端')
      this.$router.replace('/pc_index')
    }
  },
  methods: {
    // 判断是否是手机端，如果是，返回true
    _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
    }
  }