需求：项目需要根据链接实时生成二维码，当检测终端是PC时，将当前项目链接生成二维码供用户手机端使用

判断终端是否为mobile

function 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;
}

链接准备

this.$store.state.getQRCodeUrl = document.URL;
//链接也可以用window.location.href 获取
 if (!window.common.isMobile()) {
     this.$router.push({path: '/QRCodepage'}); 
      return;
   } 

插件准备

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
下载命令 npm install qrcodejs2 --save

生成二维码

<template>
  <div class="QRCodePage">
      <div class="content">
        <div class="titleCen">请扫描二维码支付</div>
        <div id='qrcode' class="qrCode"></div>
      </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
export default {
  name: 'QRCodePage',
  data () {
    return {
      url: ''
    };
  },
  created () {
    this.url = this.$store.state.getQRCodeUrl;
  },
  mounted () {
    this.createQRCode();
  },
  methods: {
    createQRCode () {
        var qrcode =  new QRCode('qrcode', {
          text: this.url,
          width: 300,
          height: 300,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        });
        qrcode.makeCode(this.url); // 生成二维码
    }
  }

};
</script>

<style lang='less'>
.QRCodePage{
    background-color: #f7f7f7;
    height: 100%;
    .content{
        width: 300px;
        height: 300px;
        margin: 20px auto;
        .titleCen{
          text-align:center;
        }
        .qrCode{
          width: 90%;
          margin:20px auto;
        }
    }
}

</style>

###注意： 在本地调试时报错-----vue.runtime.esm.js?2b0e:1888 Error: code length overflow. (1676>1056) 发布到测试上用测试域名就好了