【Vue】判断设备是移动端还是pc端
2019-03-13 18:13
2111 查看
经常在项目中会有支持 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 方法中对设置进行判断,如下:
//App.vue mounted() { if (this._isMobile()) { alert("手机端"); this.$router.replace('/m_index'); } else { alert("pc端"); this.$router.replace('/pc_index'); } }
其中 _isMobile() 方法如下:
//App.vue _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; }
效果如下:
chrome 浏览器中 pc 模式下刷新,显示如下:
chrome 浏览器中 mobile 模式下刷新,显示如下:
相关文章推荐
- JavaScript判断设备处于PC端还是移动端
- 如何判断当前设备是pc端还是移动端?
- js判断设备是pc端还是移动端
- (原) Jquery 判断设备是PC端,还是移动端
- js 设备检测(判断是移动端还是PC端)
- js 设备检测(判断是移动端还是PC端)
- 仿响应式html:JavaScript判断设备处于PC端还是移动端
- JavaScript判断页面当前浏览设备为移动端还是PC端,实现自动加载对应端页面
- PHP判断访问者手机移动端还是PC端的函数
- 判断站点访问的终端类型(移动端还是pc端)的方法
- js判断是pc端还是移动端
- js判断用户的浏览器设备是移动端还是pc端
- 判断站点访问的终端类型(移动端还是pc端)的方法
- JS判断是移动端还是PC端浏览器打开
- JS判断终端设备跳转PC端、移动端相应的URL
- 判断url是移动端还是PC端发送的
- PHP判断访问者手机移动端还是PC端的函数,亲测好用
- JS判断PC端还是移动端
- js判断是否是移动端浏览器还是pc端浏览器
- JS判断移动端还是PC端(改造自腾讯网) 仅用于宣传动画,下载页等