vue在项目中遇到的一些小细节，params,data,组件复用……

最新推荐文章于 2022-07-31 22:36:26 发布
最新推荐文章于 2022-07-31 22:36:26 发布
阅读量535 收藏
点赞数
分类专栏： 笔记 文章标签： vue js vue.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40962557/article/details/109698866
版权
本文探讨了Vue项目中GET请求时params与data的区别，以及组件重用的问题。当两个路由使用同一组件时，生命周期方法不会再次调用。为解决此问题，建议在router-view上设置唯一key以触发重新初始化。此外，利用this.$route.params.id能便捷地获取当前路由ID。
摘要由CSDN通过智能技术生成

1、请求参数中中的params和data区别
get方式提交时parms以key=value的方式拼接url
在这里插入图片描述
put和post方式提交时data将对象封装成json字符串，后端用@RequestBody接收json字符串并与相应的bean绑定。
在这里插入图片描述
在这里插入图片描述
2、组件重用问题，如果两个路由都渲染同个组件，组件的生命周期方法（created或mounted）不会再被调用, 组件会被重用，显示上一个路由渲染出来的组件
解决方案：可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化。

<router-view :key=
最低0.47元/天 解锁文章
伪全栈小白成长记
关注
专栏目录
vue2.0 组件复用 数据没有更新
fly_wugui的博客
01-28 1628
如果开发过程中出现使用v-if-else来切换组件时发现数据没有更新，那么就是因为元素被复用具体可以参考 https://cn.vuejs.org/v2/guide/conditional.html#用-key-管理可复用的元素 &lt;template v-if="loginType === 'username'"&gt; &lt;input placeholder="Enter your ...
vue调用接口获取后台数据_Vue前后端数据交互与显示
weixin_39637386的博客
12-19 2万+
一、技术概述将后端所计算的数据呈现在前端页面的相应位置并根据用户点击操作改变相应的数据和界面，再传值给后端。该技术是Web开发必备，是前后端交互的纽带。难点在于获取后端数据并且防止数据联动。二、 技术详述1. 从接口获取后端数据(1) 仔细查看后端所传数据的类型。主要是区分数组和单个数据。查看后端的请求方式，区分post或者get。(2) 首先，在data中return一个xxxData:[]数组...
关于vue中封装的post请求,参数是params:data的问题
多看书少吃饭的博客
07-18 1209
vue中封装的post请求,参数是params:data的问题
Vue params和data传参的介绍
雨声学java
05-09 1572
一、 params params使用条件： 1、get形式的传参 2、传的是一个对象 结果： 它会把你参数的内容 最后分散到你地址栏后面的问号 http://localhost:8888/user/list/1?name=liming getChapterVideoByCourseId2(courseObject) { return request({ url: `/eduservice/chapter/getChapterVideo/`, meth.
vue中params和query传参的使用和区别（Vue router）
ha_yayuan的博客
05-29 264
转载 https://blog.csdn.net/mf_717714/article/details/81945218
vue-router 组件复用问题详解
08-28
然而，在使用 Vue Router 时，可能会遇到组件复用问题，即在路由参数变化时，组件内容不能正确更新。 二、组件复用问题的原因 组件复用问题的原因是 Vue Router 在路由切换时会复用之前渲染的组件，而不是重新渲染...
在vue中使用防抖函数组件操作
10-15
在Vue开发中，有时我们需要优化性能，特别是在处理用户输入或者窗口滚动等频繁触发的事件时。防抖(debounce)函数就是一个非常实用的工具，它可以确保一个函数不会在短时间内被连续调用，而是等待一段时间后再执行。...
在vue-route路由组件中进行分页.pdf
08-20
这篇文章主要介绍了在Vue.js项目中使用vue-router路由组件实现分页的方法和步骤。 ### Vue.js和vue-router基础 Vue.js是一个构建用户界面的渐进式框架，它能够让你用最小的代价，通过组件的方式组织你的页面。而...
Vue动态路由 使用params进行传参。
任她雨雪风晴
12-27 9054
1、若要传参首先要创建一个小小的项目来渲染，这里就不多言了。 2、在src/components文件夹下定义父组件（首页）Home.vue进行传参: &lt;template&gt; &lt;div&gt; &lt;h1&gt;Hello NyDynamicRouter!&lt;/h1&gt; &lt;p v-for="(item,index) in userInfo" :key="...
(原创)vue传参之通过Vue属性$route的params传参
有效youxiao的博客
06-29 2万+
vue传值 与 vue传参是两块东西 概念图 原理 vue传参的原理主要在于 Vue.route.params(也有route.params(也有route.params (也有 route.query) route是Vue的属性.params是route是Vue的属性.params是route是Vue的属性.params是route的属性,用来储存数据的键值对.就是说它对象,...
vue中axios传参数组问题（data和params区别）
weixin_43482333的博客
07-31 4490
vue中axios传参数组问题（data和params区别）
vue传参------params和data的区别
zxcvbbnn的博客
08-25 5281
目录知识点 知识点 get请求参数是带在url上的，必须使用params，这个是肯定的，但是post的请求就不一定了 post请求既可以使用params，也可以使用data 区别是：params是放在body里的，在url中看不见参数，但是使用data的话，说明参数在url里面是能够看见的 可以根据不同的情况使用参数传参 如果这个里面或者浏览器地址里面有就用params，找不到就用data ...
Axios发送请求时params和data的区别
weixin_30300523的博客
03-30 3727
在使用axios时，注意到配置选项中包含params和data两者，以为他们是相同的，实则不然。 因为params是添加到url的请求字符串中的，用于get请求。 而data是添加到请求体（body）中的， 用于post请求。比如对于下面的get请求：axios({method: "get",url: "http://www.tuling123.com/openapi/api?key=...
params和data区别
qq_39751340的博客
10-20 814
params和data区别 因为params是添加到url的请求字符串中的，用于get请求。 而data是添加到请求体（body）中的， 用于post请求。 Element-UI带建议的输入框 Html <el-form-item label="学生学号"> <el-autocomplete :fetch-suggestions="querySearchAsync" v-model="temp.studentId" placeholder="请输入内容" @sele
vue页面params传值的坑
热门推荐
MG516的博客
08-27 3万+
a.vue向b.vue传值 a.vue this.$router.push({ path: '/payType', query: { putUpList: this.putUpList, name:'111' }, params:{ cartList: this.cartList, totalM...
vue组件复用的解决办法
qq_37642495的博客
05-17 5711
最近项目中有一个这样的bug，vue中组件复用引起的问题，解决办法就是添加k值 附上实用的解决方案：https://blog.csdn.net/yang__k/article/details/80318313
Vue 组件中的 data 为什么是函数？
q4717529的博客
03-18 5815
一、总结 1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。 2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值