Vue2前端生成二维码并实现扫码跳转完整教程

<template>
  <div>
    <canvas ref="qrcodeCanvas"></canvas>
  </div>
</template>

<script>
import QRCode from "qrcode";

export default {
  name: "QrCodeDemo",
  mounted() {
    this.generateQRCode();
  },
  methods: {
    generateQRCode() {
      const url = "https://www.baidu.com"; // 扫码后跳转的地址

      QRCode.toCanvas(
        this.$refs.qrcodeCanvas,
        url,
        {
          width: 200,
          margin: 2
        },
        function (error) {
          if (error) console.error(error);
          console.log("二维码生成成功！");
        }
      );
    }
  }
};
</script>

const url = `https://yourdomain.com/page?id=123&type=vue`;

<template>
  <img :src="qrCodeUrl" />
</template>

<script>
import QRCode from "qrcode";

export default {
  data() {
    return {
      qrCodeUrl: ""
    };
  },
  mounted() {
    QRCode.toDataURL("https://www.baidu.com").then(url => {
      this.qrCodeUrl = url;
    });
  }
};
</script>

/page?id=1

https://yourdomain.com/page?id=1

http://localhost:8080