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路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
随机推荐
- Pycharm激活码(2020最新永久激活码)
如果下边的Pycharm激活码过期失效了的话,大家可以关注我的微信公众号:Python联盟,然后回复"激活码"即可获取最新Pycharm永久激活码! 56NPDDVEIV-eyJs ...
- 详解如何在RVIZ中用Marker显示机器人运动路径
写在前面 最近有道作业题需要将机器人的历史路径显示出来,但是网上很多相关的教程都是搬运了官网的链接,并没有详细的操作流程...因此我又花费了很多时间去ros官网上学习marker的用法,学习怎么写pu ...
- 【转】Lisp的本质
Lisp的本质: http://www.csdn.net/article/2012-11-22/2812113-The-Nature-Of-Lisp###
- c++实现扫雷游戏 初学
设计思路 全局变量定义地图和一些判断信息 创建三个地图 分别表示 源地图 显示的效果地图 和一个用来判断点位是否被选中的地图 功能: 玩家输入要翻开的格子的行数和列数.用一个函数来翻开目标格子,如 ...
- IP 层收发报文简要剖析5--ip报文发送2
udp 发送ip段报文接口ip_append_data ip_append_data 函数主要用来udp 套接字以及raw套接字发送报文的接口.在tcp中发送ack 以及rest段的ip_send_u ...
- t分布与t检验的一点理解
最近又遇到了t分布及t检验方面的内容,发现有些地方自己当初没有很明白,就又查了些资料,加深了一下自己的理解,这里也将自己的一些理解记录下来. 1. 理论基础--大数定理与中心极限定理 在 ...
- rbd的增量备份和恢复
前言 快照的功能一般是基于时间点做一个标记,然后在某些需要的时候,将状态恢复到标记的那个点,这个有一个前提是底层的东西没用破坏,举个简单的例子,Vmware 里面对虚拟机做了一个快照,然后做了一些系统 ...
- python-Requests模块的使用
1. Requests简介 Requests模块是一个用于网络访问的模块,其实类似的模块有很多,比如urllib,urllib2,httplib,httplib2,他们基本都提供相似的功能,那为什么R ...
- 精尽 MyBatis 源码分析 - MyBatis 初始化(三)之 SQL 初始化(上)
该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...
- c# 调用Go 动态库
[StructLayout(LayoutKind.Sequential)] public struct GoMem { public IntPtr data; public UInt64 len; p ...