Vue - 判断当前设备是手机端或者pc端，根据设备展示页面

迷南。 2021-07-25 18:37 1303阅读 0赞

# 判断当前设备是手机端或者pc端，根据设备展示页面 #

> 在项目中经常会遇到支持 pc端 与手机端的需求。但是 pc 端和手机端尺寸差距很大，一个文件很难实现这种需求。  
> 这个时候就需要判断当前的设备，根据设备来跳转不同的路由。

1.  项目 `router` 文件夹下的 `index.js` 中有两个路由，分别是 pc 端路由和移动端路由
    
        export default new Router({
          routes: [
            {
              path: '/',
              redirect:'/pc-home'
            },
            // pc端的路由
            {
              path:'/pc-home',
              name:'pc-home',
              component:()=>import('@/components/pc/Home')
            },
            // 手机端的路由
            {
              path:'/phone-home',
              name:'phone-home',
              component:()=>import('@/components/phone/Home')
            }
          ]
        })
2.  在 `App.vue` 中判断当前设备进行跳转路由
    
        export default {
          name: "App",
          mounted() {
            if (this._isMobile()) {
              // 跳转至手机端路由
              alert("手机端");
              this.$router.replace("/phone-home");
            } else {
              // 跳转至 pc 端路由
              alert("pc端");
              this.$router.replace("/pc-home");
            }
          },
          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;
            },
          },
        };