二维码转换成短链接_二维码解析url

二维码转换成短链接_二维码解析urlVue生成二维码实战案例,vue把url地址转化为二维码手机扫码打开

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

代码

npm install qrcodejs2 --save

代码引入到项目中,不需要再main.js做处理,只需要在使用的vue页面中引入。

在页面中使用

<template>
	<div id="qrcode" ref="qrcode"></div>
</template>

<script> // 需要在页面中引入 import QRCode from 'qrcodejs2' export default{ 
      components:{ 
      QRCode }, data(){ 
      return{ 
      } } ... } </script>

生成二维码

mounted() { 
   
   	 this.qrcodeScan();    // 注:需在mounted里触发qrcodeScan函数
   }
methods:{ 
   
	qrcodeScan() { 
    //生成二维码
		let qrcode = new QRCode(document.getElementById("qrcode"), { 
   
		width: 150, // 二维码宽度 
		height: 150, // 二维码高度
		text: window.location.href, // 浏览器地址url
		colorDark: "#000000",
		colorLight: "#ffffff",
		correctLevel: QRCode.CorrectLevel.H,
		})
		// console.log(window.location.href);
	},
},

text为二维码扫码打开之后的链接
这里把url地址转化为二维码。实现pc端页面,扫码打开手机端。


如图
在这里插入图片描述
我本来还想用获取路由,然后路由拼接上前缀,
发现这样不灵活,只能路径写死 万一改域名之类的 就会出问题
然后发现了

window.location.href // 浏览器地址url

直接用这个,反正手机端和pc端地址是一样的

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/188792.html原文链接:https://javaforall.net

(0)
上一篇 2026年4月15日 下午4:19
下一篇 2026年4月15日 下午4:25


相关推荐

  • 深入理解 MySQL 事务:隔离级别、ACID 特性及其实现原理

    深入理解 MySQL 事务:隔离级别、ACID 特性及其实现原理什么是事务?事务(`Transaction`),一般是指要做的或所做的事情。在计算机术语中是指访问并可能更新数据库中各种数据项的一个程序执行单元。事务通常由高级数据库操作语言或编程语言(如SQL,C++或Java)书写的用户程序的执行所引起,并用形如`begintransaction`和`endtransaction`语句(或函数调用)来界定。事务由事务开始(`begintransaction`)和事务结束(`endtransaction`)之间执行的全部操作组成。

    2022年5月26日
    31
  • 商业银行业务架构图模板_我国商业银行组织架构

    商业银行业务架构图模板_我国商业银行组织架构 

    2022年10月12日
    4
  • J2SE总结

    J2SE总结J2SE 视频前后看了很长时间 断断续续的一直没有总结 直到我看到线程的时候 才发现 IO 没有好好总结 输入流 输出流 字节流什么的都忘的差不多了 脑海里只剩下 importjava io 为了后边快速的进行 就把 IO 这章进行了简单的回顾 看了看自己当时敲的例子 运行 改了改参数 翻了翻笔记 学习感受 1 开始进入一个新的学习阶段 对于 J2SE 的学习老师视频讲的

    2026年3月19日
    2
  • 互斥体与互锁 <第五篇>

    互斥体与互锁 <第五篇>

    2021年8月23日
    60
  • 解析数据中心监控系统功能作用

    解析数据中心监控系统功能作用数据中心机房监控系统是什么?其主要功能作用有哪些?下面机房监控系统厂家-深圳计通小编就拿计通机房监控来举例:为保证机房的安全、稳定和高效运行,保证网络设备良好的运行状态和设备使用寿命与安全,从而实现用户的最大投资效益。机房监控系统对网络运行环境的电力供应、温度、湿度、漏水、空气含尘量等诸多环境变量,UPS、空调、新风、除尘、除湿等诸多设备运行状态变量,进行24小时实时监测与智能化调节…

    2022年7月15日
    15
  • JAVA–Map集合详解

    JAVA–Map集合详解特点:该集合存储键(key)值(value)对,一对一对往里存,而且要保证键(key)的唯一性。Map集合和Set集合很像,其实Set集合底层就是使用了Map集合。什么时候使用Map集合:当数据之间存在映射关系时,优先考虑Map集合。Map集合常用共有方法1.添加Vput(Kkey,Vvalue):将指定的值与此映射中的指定键关联…

    2022年5月27日
    43

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号