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路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
随机推荐
- ps怎么做发光字体效果 ps中最简单的发光字教程
ps中最简单的发光字教程 我们先用[文字工具]输入文字(比如:发光效果),字体填充为白色,如图所示. 我们选中文字的图层,点击[FX]找到[外发光],如图所示. 接着,我们在外发光里面把颜色设置为紫色 ...
- 释放至强平台 AI 加速潜能 汇医慧影打造全周期 AI 医学影像解决方案
基于英特尔架构实现软硬协同加速,显著提升新冠肺炎.乳腺癌等疾病的检测和筛查效率,并帮助医疗科研平台预防"维度灾难"问题 <PAGE 1 LEFT COLUMN: CUSTOM ...
- 第一次本地代码提交到github
1.在个github上创建一个库 2.创建成功后,可以看到自己的仓库地址 3.在本地新建一个文件夹,并通过个git clone将仓库克隆到本地,并进入文件夹下 4.将需要提交的代码放入文件下,然后在终 ...
- SSH个人小结
初学SSH的一些总结,主要来源于谷歌搜索和鸟叔的教程http://cn.linux.vbird.org/linux_server/0310telnetssh_2.php 以及阮一峰的博客http:// ...
- 手把手教你使用Vuex(二)
在上一篇文章Vuex(一)中我们已经把Vuex需要用到的属性的单独页面引入到了store/index.js里面,所以我们接下来直接在这些js文件中写自己需要的代码就好. 1.Getter 了解:Get ...
- tcp timewait 问题 转载
TIME WAIT 带来的问题 先引用一个名言: The TIME_WAIT state is our friend and is there to help us (i.e., to let old ...
- 爬虫练习之正则表达式爬取猫眼电影Top100
#猫眼电影Top100import requests,re,timedef get_one_page(url): headers={ 'User-Agent':'Mozilla/5.0 (Window ...
- ceph的rbd备份软件ceph-backup
teralytics是一家国外的大数据公司,这个是他们开源的ceph的备份的工具,在twitter上搜索相关信息的时候看到,觉得不错就拿来试用一番 这是个什么软件 一个用来备份 ceph 的 rbd ...
- 深度分析:Java中如何如理异常,一篇帮你搞定!
异常的背景 初识异常 我们曾经的代码中已经接触了一些 "异常" 了. 例如: 除以 0 System.out.println(10 / 0); // 执行结果 Exception ...
- swupdate实例
平台:imx8mm 系统:linux 4.4 如果需要系统了解swupdate,请参考文章:嵌入式系统更新swupdate分类 一.制作升级包 emmcsetup.lua用来描述update执 ...