vue传参------params和data的区别

GET与POST请求详解
最新推荐文章于 2022-06-30 15:24:19 发布
原创 最新推荐文章于 2022-06-30 15:24:19 发布 · 5.3k 阅读 · 23 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#传参

本文详细解析了HTTP请求中的GET与POST方法的区别，重点讲解了参数传递方式：GET请求通过URL携带参数，而POST请求则将参数放置于请求体中。文章指导如何根据场景选择使用params或data进行参数传递。

目录

知识点

get请求参数是带在url上的，必须使用params，这个是肯定的，但是post的请求就不一定了
post请求既可以使用params，也可以使用data
区别是：data是放在body里的，在url中看不见参数，但是使用params的话，说明参数在url里面是能够看见的
可以根据不同的情况使用参数传参
在这里插入图片描述
如果这个里面或者浏览器地址里面有就用params，找不到就用data

body

实在区分不开，就简单一句话，你能看见的参数，传参就用params，看不见的参数，就用data

vue中axios.request发送请求中data与params的区别
qq_37634156的博客
05-13 2271
前后台交互时遇到过这样一个问题，代码如下： // 新增||修改确定 addOk (item) { if (!item) { const param = Object.assign(this.formValidate) let data = {} data.dsmEnterpriseInterface = param Postintegrator(data).then(res => { thi
Vue 设置axios请求格式为form-data的操作步骤
10-16
下面我们将详细介绍如何在Vue项目中配置axios以支持`form-data`请求格式。 首先，确保已经安装了axios。在命令行中，通过运行`npm install axios`来安装axios库。安装完成后，在项目的`main.js`文件中引入axios，并...
vue之数据请求方式
aijiaolao2823的博客
12-20 330
vue之数据请求方式 1. vue-resource 2.axios 3.fetch-jsonp 一、vue-resource 1. 安装vue-resource 在项目根目录进行安装：cnpm install vue-resource --save save说明：将此插件名插入到pachage.json文件中，别人在使用时，直接npm install，就会安装packag...
vue如何从接口请求数据
08-30
本篇文章主要介绍了vue如何从接口请求数据 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue请求数据
My_Soul_的博客
07-21 362
vue请求数据 （1）使用vue-resource请求数据，vue官方请求方法 1、需要安装vue-resource模块， 注意加上 --save npm install vue-resource --save / cnpm install vue-resource --save 2、main.js引入 vue-resource import VueResource from 'vue-reso...
详解vue-router传参的两种方式
10-18
本文将深入探讨 Vue Router 中传参的两种主要方式：`params` 和 `query`。 1. `params` 参数： `params` 主要用于动态路由，通过在路径中使用冒号（`:`) 来定义参数。例如，路由 `/router1/:id`，这里的 `id` 就是...
vue-router传参用法详解
10-17
在 Vue 应用中，我们经常需要在组件之间传递数据，而 Vue Router 提供了多种传参方法。接下来，我们将详细探讨两种主要的传参方式：动态路径参数和通过查询字符串的 GET 方式。 ### 一、动态路径参数 动态路径参数...
vue-router命名路由和编程式路由传参讲解
10-17
在本文中，我们将深入探讨 Vue Router 的命名路由和编程式路由传参，帮助你更好地理解和运用这些功能。 ### 命名路由（Named Routes） 命名路由是一种在配置路由时为路由分配一个名称的方法，而不是仅仅使用路径。...
vue-router 路由传参用法实例分析
10-15
在 Vue 应用中，我们通常使用 Vue Router 来实现单页应用(SPA)的页面间跳转和数据传递。本篇文章将深入探讨 Vue Router 的路由传参方法。 首先，路由传参主要分为两种方式：查询参数和命名参数。 1. **查询参数**...
vue 请求数据
扮老虎的猪
07-16 1598
Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource。 目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据，此处主要讲解使用axios获取数据——改写原型链。 首先在mian.js引入axios: import axi
Vue请求数据
kitt15的博客
09-20 479
使用vue-resource请求数据 1、安装vue-resource npm install –save vue-install 2、在入口文件main.js引用并使用 import Vue from 'vue' import App from './App.vue' import VueResource from 'vue-resource'//引入VueResource Vue.u...
Vue 数据请求
Zou_1024的博客
05-27 648
数据请求 数据请求在前端开发中的使用有两种形式 使用原生javascript提供的数据请求 ajax( 四部曲，一般需要我们结合Promise去封装，使用不是很便利，但是效率很高 ) fetch( 本身结合了Promise,并且已经做好了封装，可以直接使用 ) 使用格式： 使用别人封装好的第三方库 目前最流行的，使用率最高的是 axios vue中我们最常使用的 vue ...
vue数据请求
m0_57997609的博客
06-30 412
数据请求
vue.js请求数据
dreamStart_Lin的博客
04-19 2767
两种方法，一种是用jq的ajax请求之后将数据放到vue的data中，一种是用vue-resource请求 一、动态参数显示 ajax异步请求后，接收到返回的data参数并显示在前端 1 引入js,jQuery2 htmlv-for ="data in datas " ID 名称 年龄 简称
VUE请求数据的方法
weixin_45301448的博客
04-21 648
第一步 cd 到项目目录安装插件 npm install vue-resource --serve 第二步 找到项目目录下面的 main.js 引入 ：import VueResource from 'vue-resource'; Vue.use(VueResource); 第三步 { // GET /someUrl this.$http.get(’/someUrl’).the...
vue-router params query 传参区别
最新发布
10-27
在vue-router中，params和query传参有以下区别： 1. **传参搭配属性**：在`this.$router.push()`方法中，params传值必须有name属性；而query传值与name和path属性无必然联系，和其中哪个属性搭配都可以传值。例如params传参使用`this.$router.push({name:'details',params:{id:123}})`；query传参可以使用`this.$router.push({path:'details',query:{id:123}})`等多种方式 [^3]。 2. **参数显示**：params传值在url上看不到传递的参数；query传值在url上能看到传递的参数，如`http://192.168.187.20:8080/#/dashboard/?data=hello` [^2][^3]。 3. **安全性**：由于params传递参数不显示在地址栏，所以params相对于query更安全一点 [^2]。 4. **刷新页面数据情况**：通过query传值，跳到另一个页面的时候，刷新还是可以取到传递过来的值；而params传值刷新页面数据会消失，即取不到值 [^2][^3]。 5. **请求方式类比**：query相当于get请求，params相当于post请求 [^2]。 6. **取值方法**：获取参数值时，query使用`this.$route.query.xxx`，params使用`this.$route.params.xxx` [^1][^2][^3]。 示例代码如下： ```vue <template> <div> <!-- query传参 --> <router-link :to="{ path: 'details', query: { id: 123 }}">点击按钮(query path)</router-link> <router-link :to="{ name: 'details', query: { id: 123 }}">点击按钮(query name)</router-link> <!-- params传参 --> <router-link :to="{ name: 'details', params: { id: 123 }}">点击按钮(params)</router-link> </div> </template> <script> export default { methods: { queryPushByPath() { this.$router.push({ path: 'details', query: { id: 123 } }); }, queryPushByName() { this.$router.push({ name: 'details', query: { id: 123 } }); }, paramsPush() { this.$router.push({ name: 'details', params: { id: 123 } }); } } } </script> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值