【nuxt.js】pc端链接转成二维码 可以手机端长按或者扫扫码识别

需求：
vue\nuxt.js项目 中pc端链接转成二维码 可以手机端长按或者扫扫码识别,最终效果：

方法一：单纯生成带数据的二维码
1）：终端安装@xkeshi/vue-qrcode.js包

npm install --save @xkeshi/vue-qrcode //安装到生产环境

<template>
  <div class="article-id">
    <div class="qrcodeBox">
      <qrcode  :value="url" v-if="url"></qrcode>
    </div>
  </div>
</template>

<script>
import Qrcode from "@xkeshi/vue-qrcode"; //引入
export default {
  data() {
    return {
      url: ''
    }
  },
  //注册生成二维码组件
  components: {
    qrcode: Qrcode
  },
  mounted() {
    this.url = location.href.replac