iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中传参params和data的区别
  • 895
分享到

vue中传参params和data的区别

2024-04-02 19:04:59 895人浏览 安东尼
摘要

目录1、使用data传参2、使用params传参3、总而言之1、使用data传参 前端请求方式为post import request from '@/utils/request'

1、使用data传参

前端请求方式为post

import request from '@/utils/request'

// 新增banner
export function saveBanner(data){
  return request({
    url:'/system/banner/saveBanner',
    method:'post',
    data:data
  })
}

在这里插入图片描述

后端接口接收


@PostMapping("/saveBanner")
public ajaxResult saveBanner(@RequestBody SysBanner sysBanner) {
	return sysBannerService.saveBanner(sysBanner);
}

在这里插入图片描述

2、使用params传参

前端请求

在这里插入图片描述

//查询导航图列表信息
export function getBannerList(query){
  return request({
    url: '/system/banner/list',
    method: 'get',
    params: query
  })
}

后端接收

  • 接收时的请求方式为GetMapping
  • 并且入参也不需要@RequestBody注解

在这里插入图片描述

3、总而言之

如果前端请求的方式是 post,并且后端的Http请求为 @PostMapping,那么后端的参数上面要写 @RequestBody ,而且前端传递参数的时候要写 data,因为是 JSON 传参。 因为用post请求使用data传参的时候,参数是放在请求体中的,所以地址栏上也不显示具体的参数。

如果是以get形式的传参,并且传的是一个对象,就用params,他会把你参数的内容 最后分散到你地址栏后面的问号(?)后面,如上面的例子最后的地址就是:http://localhost:8888/user/list/1/20?name=zhansan

到此这篇关于Vue中传参params和data的区别的文章就介绍到这了,更多相关vue 传参params和data内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue中传参params和data的区别

本文链接: https://www.lsjlt.com/news/146577.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中传参params和data的区别
    目录1、使用data传参2、使用params传参3、总而言之1、使用data传参 前端请求方式为post import request from '@/utils/request' ...
    99+
    2024-04-02
  • vue中传参params和data的区别是什么
    今天小编给大家分享一下vue中传参params和data的区别是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1、使用d...
    99+
    2023-06-30
  • vue-router中query和params的区别解析
    目录认识vue-router一. query和params的知识点理解二. query和params的使用方法1.使用params传参,路由配置的时候path要带上动态参数2. 使用...
    99+
    2022-11-13
    vue-router query和params区别 vue-router query
  • vue中query和params的区别有哪些
    这篇“vue中query和params的区别有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue中query和para...
    99+
    2023-06-29
  • vue中data和data()的区别说明
    目录data和data()的区别Vue实例中data属性组件化的项目中使用详解vue.js中的data文档之一文档之二文档之三文档之四data和data()的区别 Vue实例中dat...
    99+
    2024-04-02
  • vue中如何使用params、query传参
    这篇文章主要介绍vue中如何使用params、query传参,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!声明式:<router-link :to="..."...
    99+
    2024-04-02
  • vue中data和data()的区别有哪些
    小编给大家分享一下vue中data和data()的区别有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!data和data()的区别Vue实例中data属性new Vue({  el:&nb...
    99+
    2023-06-29
  • axios请求中以params或body形式传递参数的区别浅析
    目录一、前言:二、Axios post三、代码举例说明get请求post请求四、总结一、前言: 前端发送请求最常⽤的是get请求还有post请求,get请求只能传query参数,qu...
    99+
    2023-05-14
    axios 请求参数 axios传参数 axios请求带参数
  • 详解Vue路由传参的两种方式query和params
    Vue路由传参的两种方式query和params 一、router-link 1. 不带参数 <router-link :to="{name:'home'}"> <...
    99+
    2024-04-02
  • axios请求中以params或body形式传递参数的区别是什么
    今天小编给大家分享一下axios请求中以params或body形式传递参数的区别是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解...
    99+
    2023-07-05
  • uniapp和vue data里面区别
    Vue 和 Uniapp 都是基于 Vue 的框架,它们之间有很多相同之处,但也有一些不同之处。其中之一就是数据管理的方式不同。在 Vue 中,我们通常使用 data 属性来存储组件的数据,而在 Uniapp 中,我们可以使用 data 属...
    99+
    2023-05-22
  • vue嵌套路由中params传递参数的示例分析
    这篇文章主要介绍vue嵌套路由中params传递参数的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在嵌套路由中,父路由向子路由传值除了query外,还有params,par...
    99+
    2024-04-02
  • 方法参数属性params,@PathVariable和@RequestParam用法及区别
    目录【1】params【2】@PathVariable绑定URL中变量① 前台实例② 后台代码③ 注解源码【3】@RequestParam① 注解源码② 前台请求实例③ 后台代码【1...
    99+
    2022-11-13
    方法参数属性 params属性 @PathVariable属性 @RequestParam属性
  • 如何在vue3+ts项目中使用query和params传参
    目录一 query 传参 (类似get请求)query 传参方式①query 传参方式② query 传参方式③二 params 传参 (类似post请求)params 传...
    99+
    2023-05-16
    vue query和params传参区别 vue的query传参 vue的params传参
  • vue项目中form data形式传参方式
    目录vue中form data形式传参vue文件提交 FormData方式前驱知识FormDateFormData的使用URL实操vue中form data形式传参 vue项目中fo...
    99+
    2024-04-02
  • jquery中data()和attr()的区别有哪些
    本篇内容介绍了“jquery中data()和attr()的区别有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学...
    99+
    2024-04-02
  • C++ 函数参数传递值和传递引用的区别
    c++++ 函数参数传递有值传递和引用传递两种方式:值传递:创建局部变量副本,对副本的修改不影响原始变量。引用传递:直接传递对原始变量的引用,对引用变量的修改反映在原始变量中。 C++...
    99+
    2024-04-19
    函数 c++ 引用传递 值传递
  • c语言中形参和实参的区别
    形参和实参是函数调用中的概念,形参用于接收实际数据,实参用于传递实际数据。形参位于函数头,实参位于函数调用时;形参和实参建立单向关联,实参可修改形参但反之不行;作用域上形参限于函数内而实...
    99+
    2024-04-27
    c语言 作用域
  • 基于params、@PathVariabl和@RequestParam的用法与区别说明
    方法参数相关属性params、@PathVariabl和@RequestParam的使用 【1】params params:指定request中必须包含某些参数值是,才让该方法处理。...
    99+
    2024-04-02
  • c语言中的实参和形参的区别
    实参是函数调用时传递的实际值,而形参是函数定义中声明的占位符变量,用于接收实参值。实参在调用时确定,形参在定义时确定;实参可以改变,形参只能在函数体内修改。 实参和形参在 C 语言中的...
    99+
    2024-05-02
    c语言
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作