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种方法和区别的更多相关文章

  1. react router @4 和 vue路由 详解(五)react怎么通过路由传参

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...

  2. vue之路由传参三种基本方式

    现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...

  3. vue路由的跳转-路由传参-cookies插件-axios插件-跨域问题-element-ui插件

    ---恢复内容开始--- 项目初始化 创建一个纯净的vue环境项目,手动书写全局的样式配置,全局的main,js配置 (1)如果vue项目在重构或者出错的时候,手动安装node_modules. 如果 ...

  4. vue路由传参query和params的区别(详解!)

    1.query使用path和name传参都可以,而params只能使用name传参. query传参: 页面: this.$router.push({ path:'/city',name:'City' ...

  5. Vue框架(四)——路由跳转、路由传参、cookies、axios、跨域问题、element-ui模块

    路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.pus ...

  6. vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期

    目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...

  7. vue 和 react 路由跳转和传参

                      react  1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...

  8. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  9. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

随机推荐

  1. Linux C Socket 编程

    1 Socket 是什么 Socket(套接字),就是对 网络上进程通信 的 端点 的 抽象.一个 Socket 就是网络上进程通信的一端,提供了应用层进程利用网络协议交换数据的机制. 从所处的位置来 ...

  2. Hopfield Network 霍普菲尔德网络入门

    简介 Hopfield Network (霍普菲尔德网络),是 Hopfield 在1982年提出的一种基于能量的模型,发表的文章是 Neural networks and physical syst ...

  3. 重置GrindConrol焦点行FocusedRowHandle

    List<model> list=this.CurrentList; var selectModel=tempselectmodel; //找selectModel在list中得位置 va ...

  4. 内网渗透 day4-meterpreter基本命令

    meterpreter基本命令 目录 1.getuid 查看当前用户 1 2.getpid 查看当前的进程id 1 3.getsystem 初步提权 1 4.ps 1.查看进程列表2.帮助我们获取pi ...

  5. 内网渗透 day1-基础

    粘滞键和放大镜 1. 到/windows/system32下用takeown改变该文件夹下的文件拥有权(因为粘滞键和放大镜都在system32文件夹下) cd /Windows/system32    ...

  6. 3. Hive相关知识点

    以下是阅读<Hive编程指南>后整理的一些零散知识点: 1. 有时候用户需要频繁执行一些命令,例如设置系统属性,或增加对于Hadoop的分布式内存,加入自定的Hive扩展的Jave包(JA ...

  7. 有名管道FIFO进程间数据传输实例

    紧接着上面一个博客的简单介绍,下面进行一个没有血缘关系的进程间通信的实例,实现文件拷贝传输. 有两个进程,一个主要是fifow进程:读文件Makefile内容,写入管道;另一个进程fifor:读管道内 ...

  8. 判断机器是big-endian、little-endian

    联合体union和大小端(big-endian.little-endian):下边示范了一种用途,代表四个含义的四个变量,但是可以用一个int来操作,直接int赋值,无论内存访问(指针大小的整数倍,访 ...

  9. gcc 去除无用程序段

    嵌入式系统中,对程序尺寸要求高时,可以使用本方法 代码中,经常会有一种情况,库中并非所有函数都会用到.然而,无用的函数也最终被编译进可执行文件中了. 为避免这一情况,可以在编译时,添加选项:-ffun ...

  10. Python_网络编程_socket()

    什么是 Socket? Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求,使主机间或者一台计算机上的进程间可以通讯. 详细资 ...