Vue判断设备是移动端还是pc端

似水的流年

发布于 2020-05-26 16:47:35

4.2K1

发布于 2020-05-26 16:47:35

文章被收录于专栏：电光石火

经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置，根据不同的设置跳转不同的路由。在 router/index.js 中添加两个页面

export default new Router({
  routes: [
    {
      // pc端首页
      path: '/',
      name: 'index',
      component: () => import('../views/index.vue')
    },
    {
      // pc端首页
      path: '/m_index',
      name: 'm_index',
      component: () => import('../views/m_index.vue')
    },
  ]
})

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

if (this._isMobile()) {
  this.$router.replace('/m_index');
} else {
  this.$router.replace('/');
}


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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-05-12，如有侵权请联系 cloudcommunity@tencent.com 删除

app