前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue判断设备是移动端还是pc端

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

作者头像
似水的流年
发布2020-05-26 16:47:35
4.2K1
发布2020-05-26 16:47:35
举报
文章被收录于专栏:电光石火

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

代码语言:javascript
复制
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 方法中对设置进行判断,如下:

代码语言:javascript
复制
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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档