SpringBoot融合thymeleaf模板渲染前端Vue数据的带#和动态参数问题

简介: 废话少说上代码 带#参数是第二次更新的 我感觉写代码一定要敢写 因为我在vue请求的时候已经做过#处理了 但是在html中总感觉实现不了 一开始我在网上找了大片的参数中含有#的处理方式 都是驴头不对马尾 最后无奈 加了上去 这个方法就是 encodeURIComponent 莫名其妙还实现了

这里解决一下 前端Vue数据的带参问题和带的参数中含有#的参数


废话少说上代码 带#参数是第二次更新的 我感觉写代码一定要敢写 因为我在vue请求的时候已经做过#处理了 但是在html中总感觉实现不了 一开始我在网上找了大片的参数中含有#的处理方式 都是驴头不对马尾 最后无奈 加了上去 这个方法就是 encodeURIComponent 莫名其妙还实现了

<li class="index_arc_item" v-for="items in dataall">
    <a href="#" class="pic">
        <img class="lazyload" data-original="images/7.jpg" />
    </a>
    <h4 class="title"><a :href="'/acticleshow/'+encodeURIComponent(items.dataname)">{{items.dataname}}</a></h4>
    <div class="date_hits">
        <span>{{items.author}}</span>
        <span>{{items.datatime}}</span>
        <span><a href="">{{items.dataclassify}}</a></span>
        <p class="hits"><i class="Hui-iconfont" title="点击量">&#xe6c1;</i> 276° </p>
        <p class="commonts"><i class="Hui-iconfont" title="点击量">&#xe622;</i> <span
                class="cy_cmt_count">20</span></p>
    </div>
    <div class="desc">{{items.databrief}}</div>
</li>


image.png


我这里的思路就是前端的vue在进行v-for渲染数据的时候 取vue的当前的某一个数据 继续href传参 传给后端  后端进行根据传的参数进行相应的操作我网站的逻辑就不说了  主要还是 href前面的: 因为用thymeleaf模板的时候很容易就把 @href和:href 语法弄混了 这里记录一下 也算是实战经验


推广一个个人学习资料库


相关文章
|
22小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的汽车4s店管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的汽车4s店管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
24 6
基于SpringBoot+Vue的汽车4s店管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
22小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的拍卖管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的拍卖管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
28 9
|
22小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的易家宜超市云购物系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的易家宜超市云购物系统的详细设计和实现(源码+lw+部署文档+讲解等)
13 6
|
22小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的智慧农业小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的智慧农业小程序的详细设计和实现(源码+lw+部署文档+讲解等)
12 6
|
22小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的校园互助平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的校园互助平台的详细设计和实现(源码+lw+部署文档+讲解等)
17 6
|
22小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的民宿预约管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的民宿预约管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
17 6
|
22小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的渔船出海及海货统计系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的渔船出海及海货统计系统的详细设计和实现(源码+lw+部署文档+讲解等)
12 5
|
22小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的发艺美发店管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的发艺美发店管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
18 5
|
22小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的宠物猫售卖管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的宠物猫售卖管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
10 3
|
22小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的学生作业管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的学生作业管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
13 5