原生的js操作实现通过对URL的监控获取参数

在优化网站过程中,针对Vue组件循环渲染的列表,使用原生JavaScript通过监听URL来获取用户操作信息。通过为文章添加链接标签,并绑定参数,利用URL的#和=进行分隔,捕获并解析参数以实现动态页面跳转。
摘要由CSDN通过智能技术生成

原生的js操作实现通过对URL的监控获取用户的操作信息

优化网站的时候,因为列表是用vue组件进行循环渲染,就出现了一个问题,单击跳转的问题,想了很多方案,使用js函数的方式面对这种情况并不乐观,想到学校OJ用的就是用#附加参数,搜了一下大佬们博客,搞了一个监控URL完成跳转。
主要是这些点:

  1. 给每一个文章附加一个按钮,实质是链接标签,绑定一下参数与文章号,
<a v-bind:href="'#id='+psgmsg.blogId" class="btn btn-primary">Have a look</a>
  1. 添加的参数被监听器捕获,进行页面跳转,参数附加在Get类型的参数中,交给另一个页面操作
  2. 对网站的URL进行#为分隔符的划分,然后对每个部分用=为分隔符的划分,然后遍历找到id字符,取出下一个值

代码如下

//监听触发操作
       function hashChange(){
           var query = window.location.href;
           var vars = query.split("#");
           for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               i
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值