React跳转路由传参3种方法和区别
1、params传参
路由表配置:参数地址栏显示
路由页面:<Route path='/demo/:id' component={Demo}></Route> //配置 /:id
路由跳转并传递参数:
链接方式:<Link to={'/demo/' + '2'}>XX</Link>
js方式:this.props.history.push('/demo/' + '2')
获取参数:this.props.match.params.id
2、query传参
query方法:参数地址栏不显示,刷新地址栏,参数丢失
路由页面:<Route path='/demo' component={Demo}></Route> //无需配置
路由跳转并传递参数:
链接方式:<Link to={{path:'/demo',query:{name:'dahuang'}}}>XX</Link>
js方式:this.props.history.push({pathname:'/demo',query:{name:'dahuang'}})
获取参数: this.props.location.query.name
3、state传参( 同query差不多,只是属性不一样,而且state传的参数是加密的,query传的参数是公开的,在地址栏)
state方法:参数地址栏不显示,刷新地址栏,参数不丢失
路由页面:<Route path='/demo' component={Demo}></Route> //无需配置
路由跳转并传递参数:
链接方式: <Link to={{path:'/demo',state:{name:'dahuang'}}}>XX</Link>
js方式:this.props.history.push({pathname:'/demo',state:{name:'dahuang'}})
获取参数: this.props.location.state.name
React跳转路由传参3种方法和区别的更多相关文章
- react router @4 和 vue路由 详解(五)react怎么通过路由传参
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...
- vue之路由传参三种基本方式
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...
- vue路由的跳转-路由传参-cookies插件-axios插件-跨域问题-element-ui插件
---恢复内容开始--- 项目初始化 创建一个纯净的vue环境项目,手动书写全局的样式配置,全局的main,js配置 (1)如果vue项目在重构或者出错的时候,手动安装node_modules. 如果 ...
- vue路由传参query和params的区别(详解!)
1.query使用path和name传参都可以,而params只能使用name传参. query传参: 页面: this.$router.push({ path:'/city',name:'City' ...
- Vue框架(四)——路由跳转、路由传参、cookies、axios、跨域问题、element-ui模块
路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.pus ...
- vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期
目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...
- vue 和 react 路由跳转和传参
react 1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- Vue路由传参的几种方式
原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
随机推荐
- Linux C Socket 编程
1 Socket 是什么 Socket(套接字),就是对 网络上进程通信 的 端点 的 抽象.一个 Socket 就是网络上进程通信的一端,提供了应用层进程利用网络协议交换数据的机制. 从所处的位置来 ...
- Hopfield Network 霍普菲尔德网络入门
简介 Hopfield Network (霍普菲尔德网络),是 Hopfield 在1982年提出的一种基于能量的模型,发表的文章是 Neural networks and physical syst ...
- 重置GrindConrol焦点行FocusedRowHandle
List<model> list=this.CurrentList; var selectModel=tempselectmodel; //找selectModel在list中得位置 va ...
- 内网渗透 day4-meterpreter基本命令
meterpreter基本命令 目录 1.getuid 查看当前用户 1 2.getpid 查看当前的进程id 1 3.getsystem 初步提权 1 4.ps 1.查看进程列表2.帮助我们获取pi ...
- 内网渗透 day1-基础
粘滞键和放大镜 1. 到/windows/system32下用takeown改变该文件夹下的文件拥有权(因为粘滞键和放大镜都在system32文件夹下) cd /Windows/system32 ...
- 3. Hive相关知识点
以下是阅读<Hive编程指南>后整理的一些零散知识点: 1. 有时候用户需要频繁执行一些命令,例如设置系统属性,或增加对于Hadoop的分布式内存,加入自定的Hive扩展的Jave包(JA ...
- 有名管道FIFO进程间数据传输实例
紧接着上面一个博客的简单介绍,下面进行一个没有血缘关系的进程间通信的实例,实现文件拷贝传输. 有两个进程,一个主要是fifow进程:读文件Makefile内容,写入管道;另一个进程fifor:读管道内 ...
- 判断机器是big-endian、little-endian
联合体union和大小端(big-endian.little-endian):下边示范了一种用途,代表四个含义的四个变量,但是可以用一个int来操作,直接int赋值,无论内存访问(指针大小的整数倍,访 ...
- gcc 去除无用程序段
嵌入式系统中,对程序尺寸要求高时,可以使用本方法 代码中,经常会有一种情况,库中并非所有函数都会用到.然而,无用的函数也最终被编译进可执行文件中了. 为避免这一情况,可以在编译时,添加选项:-ffun ...
- Python_网络编程_socket()
什么是 Socket? Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求,使主机间或者一台计算机上的进程间可以通讯. 详细资 ...