vue中根据手机类型判断是安卓、微信或IOS跳转相应下载页面

按钮：<div class="download" @click="downApp">立即下载</div>

遮罩层：<div class="dark" v-show="ShowDark"></div>

弹框：<div class="pop" v-show="ShowPop" style="display:block;">

               <p>ios版本即将上线，敬请期待！</p>

               <button @click="downApp">确定</button>

        </div>

js代码：

data() {

     return {

         ShowPop: false，

　　  ShowDark ：false

     }

  },

methods:{

   downApp() {

        let ua = navigator.userAgent.toLowerCase();

        //android终端

        let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;  

·　　//ios终端

        let isiOS = !!ua.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); 

        if (isWeixinBrowser()) {

           this.$router.push({

              path: '/product'

           })

        } else {

           if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {

              //ios

              this.ShowPop = !this.ShowPop;

              this.ShowDark = !this.ShowDark;

           } else if (/(Android)/i.test(navigator.userAgent)) {

              //android

              window.location = 'http://www.xyfan.top/app.apk'

           }

        }

 

        function isWeixinBrowser() {

            return (/micromessenger/.test(ua)) ? true : false;

        }

  }

}