Vue框架判断当前设备是PC还是移动端

实际开发工作中会经常遇到一个需求，就是判断当前登录网页的设备是PC还是移动，要求PC端和移动端显示的是不同的网页内容。
那么我们就需要对当前登录设备进行判断。

全局

main.js

Vue.prototype.$equipment=function(){
 	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;
}

需要用到的vue页面

<template>
	<div>
		<div v-if="this.$equipment !== null">
			<mobile-page></mobile-page>
		</div>
		<div v-else>
			<pc-page></pc-page>
		</div>
	</div>
</template>

 局部

router.js

routes: [
    {
      path: '',
      redirect: '/pc_index'
    },
    {
      path: "/pc_index", // pc端首页
      name: PcIndex,
      component: PcIndex
    },
    {
      path: '/m_index', // 手机端首页
      name: MIndex,
      component: MIndex
    }
  ]

在 App.vue 的 mounted 方法中对设置进行判断，如下:

mounted() {
    if (this._isMobile()) {
      alert("手机端");
      this.$router.replace('/m_index');
    } else {
      alert("pc端");
      this.$router.replace('/pc_index');
    }
  }

在 App.vue 的 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)
      return flag;
    }
  }

js判断设备是手机还是PC还是ipad

    const device = navigator.userAgent
    if (device.indexOf('iPad') > -1) {
      //  ipad 

      } else if (device.indexOf('Android') > -1 || device.indexOf('ios') > -1) {
      // 手机

      } else {
      // 电脑

      }

https://juejin.cn/post/7033793636760453133