判断当前设备是手机端或者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;
        },
      },
    };
    
Logo

前往低代码交流专区

更多推荐