vue 判断设备是手机端还是pc端

如果项目中有支持PC和手机端的需求，并且二者页面不用，这时就要判断设置，根据不同的设置跳转不同的路由。

在router/index.js文件中

export default new Router({mode: 'history',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');}}

其中 _isMobile() 方法如下:

_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;}

【效果展示】
PC端：

手机端（真机测试）：

vue 判断设备是手机端还是pc端相关推荐

JS判断设备是手机端还是PC端，并加载不同的css/js文件
最近公司有个页面需要做pc端和手机端的页面自适应,即手机打开是指定的样式,pc打开则是pc指定的样式,样式是前端ui已经设计好了的. 所以这里需要通过Navigator userAgent 属性判断浏 ...
vue-判断设备是手机端还是pc端
经常在项目中会有支持 pc 与手机端需求.并且pc与手机端是两个不一样的页面.这时就要求判断设置,根据不同的设置跳转不同的路由. [代码演示] 在 router/index.js 中有两个页面. ex ...
判断浏览器是手机端还是pc端以及判断安卓还是iOS
// 方法一 function IsPC() {var userAgentInfo = navigator.userAgent; var Agents = ["Android", ...
php 判断来源微信客户端_PHP判断手机端、PC端、微信代码实例
欢迎大家关注我的其他Github博客和CSDN博客,互相交流! 在这里博主为大家分享了PHP判断的两个实例,一是PHP判断是手机端还是PC端,二是PHP判断是否是微信浏览器,供大家参考,具体内容如下 ...
微信php示例代码,PHP判断手机端、PC端、微信示例代码分享
在这里博主为大家分享了PHP判断的两个实例,一是PHP判断是手机端还是PC端,二是PHP判断是否是微信浏览器,供大家参考,具体内容如下 1.判断是否是手机端function isMobile() { ...
php判断客户端是微信,PHP判断是手机端还是PC端以及PHP判断是否是微信浏览器
这篇文章主要为大家详细介绍了PHP判断是手机端还是PC端,以及PHP判断是否是微信浏览器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了PHP判断的两个实例,一是PHP判断是手 ...
php判断移动端和pc端访问_PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
本文实例为大家分享了PHP判断的两个实例,一是PHP判断是手机端还是PC端,二是PHP判断是否是微信浏览器,供大家参考,具体内容如下 1.判断是否是手机端 function isMobile() { ...
html页面判断是手机端访问,JS 判断手机端和pc端后跳转对应页面
判断手机端和pc端 (function () { var sUserAgent = navigator.userAgent; if (sUserAgent.indexOf('Android') > ...
phpcmsv9实现手机端与PC端双模板的方法与详细教程(转)
现在随着智能手机的兴起,我们网站开发移动端版本也显得越来重要了,但是现在phpcms还没有开发手机版,下面我们就教大家如何让phpcms实现手机版访问,一般正常情况下我们电脑版的域名为http://w ...
nginx之自动识别手机端和pc端
Detect Mobile Browsers Detect Mobile Browsers 是外国的一套可以自动适配手机端和pc端的脚本代码.有Apache ASP ASP.NET ColdFusio ...

vue 判断设备是手机端还是pc端

vue 判断设备是手机端还是pc端相关推荐

最新文章

热门文章