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

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>