vue生成二维码以及获取当前的地址url

<template>
  <div class="hello">
    <h2>二维码</h2>
   <canvas ref="qrCodeCanvas"></canvas>
<div>{{url}}</div>
  </div>
</template>

<script>
import QRCode from 'qrcode';

export default {
  props: {
    msg: String,
    url:''
  },
  methods: {
    generateQRCode () {
      const canvas = this.$refs.qrCodeCanvas; // 获取 canvas 元素的引用
      const text = 'https://www.baidu.com'; // 二维码的文本内容

      QRCode.toCanvas(canvas, text, (error) => {
        if (error) {
          console.error('生成二维码失败', error);
        }
      });
    },
    text () {
     var url=window.location.href;
     this.url=url;
     console.log(url)
    },
  },
  mounted () {
    this.text();
    this.generateQRCode();
  
  },
}
</script>
<style scoped>
</style>

 效果：