vue前端判断当前是PC端还是手机端,跳转不同页面

一、html

<div class="container">
  <template v-if="ismOrpc == 'PCoperation'">
     <basic-info></basic-info>
   </template>
   <template v-else>
     <mo-basic-info></mo-basic-info>
   </template>
 </div>

设置标志位ismOrpc,如果ismOrpc 为PCoperation代表当前是PC端,显示对应的组件,否则显示手机端的组件。

二、Js

  created(){
      if (this._isMobile()) {
        //手机端
        this.ismOrpc = 'Moperation'
        //设置rem
        window.onload = function(){
          getRem(750,100)
        };
        window.onresize = function(){
          getRem(750,100)
        };
        function getRem(pwidth,prem){
          var html = document.getElementsByTagName("html")[0];
          var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
          html.style.fontSize = oWidth/pwidth*prem + "px";
        }

      } else {
        //pc端
        this.ismOrpc = 'PCoperation'
      }
    },
    methods: {
      //判断手机端还是PC端
      _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;
      }
    },

注:navigator.userAgent可以获取浏览器信息(类型及系统)

欢迎各位大佬指正批评~~~

你可能感兴趣的:(Vue.js,vue.js)