电光石火电光石火

陌晴博客
ilkhome.cn

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

经常在项目中会有支持 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;
  }
}
本博客所有文章如无特别注明均为原创。作者:似水的流年
版权所有:《电光石火》 => Vue判断设备是移动端还是pc端
本文地址:http://www.ilkhome.cn/index.php/archives/648/
欢迎转载!复制或转载请以超链接形式注明,文章为 似水的流年 原创,并注明原文地址 Vue判断设备是移动端还是pc端,谢谢。

评论