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

经常在项目中会有支持 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;
  }
}

app router

0 人点赞