react更改路由入参_react路由传参方式

三种方法 1：query 2.params 3.state

第一种方法：

1.路由表中

2.Link处

HTML方式

XXXX

JS方式

this.props.history.push( '/sort/'+'2' )

3.sort页面

通过 this.props.metch.params.id

就可以接受到传递过来的参数(id)

componentWillReceiveProps(nextProps){

console.log(nextProps.match.params,222)

console.log(this.props)

}

第二种方法

通过query

前提：必须由其他页面跳过来，参数才会被传递过来

注：不需要配置路由表。路由表中的内容照常：

1.Link处

HTML方式

JS方式

this.props.history.push({ path : '/sort' ,query : { name: ' sunny'} })

2.sort页面

this.props.location.query.name

或者也可以这样写

Link处

home2222

对应页面的获取方式

componentDidMount () {

console.log(this.props)

// const query=qs.parse(

// this.props.location.search,

// { ignoreQueryPrefix:true}

// )

// console.log(query);

}

第三种

通过state

同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，在地址栏

1.Link 处

HTML方式：

JS方式：

this.props.history.push({ pathname:'/sort',state:{name : 'sunny' } })

2.sort页面

this.props.location.state.name

react更改路由入参_react路由传参方式相关推荐

路由配置url跳转传参_如何配置路由器以进行网络范围的URL记录
路由配置url跳转传参 Don't be in the dark about who is visiting what web sites on your LAN. Use our two-prong ...
vue动态路由传参---query传参和params传参
当一个页面跳转到另一个页面时,组件结构相同,只是内容不同且地址栏后缀不同 ,这个地址栏的后缀就是参数,根据不同参数渲染不同的内容,这个跳转就叫路由传参. 当项目中组件间通过路由跳转,有时,我们需要传递 ...
vue 中的动态传参和query传参
Vue router 如何传参 params.query 是什么? params:/router1/:id,这里的 id 叫做 params.例如/router1/123, /router1/789 ...
python 元组传参 *args 字典传参 **kwargs 的用法
python 元组传参 *args 字典传参 **kwargs 的用法 # 元组参数 def func_arg(*args):print("args:", args) func_a ...
python中函数的参数：必传参数（位置参数）、默认值参数、参数组传参、关键字传参...
1.必传参数也叫做位置参数,因为必填,也必须对应位置 2.默认值参数如上图的word 3.参数组参数:传进去的是0个.或多个value的形式,,,和位置参数有点像,只传value值,但是没有限制个数 ...
vue 事件调用传参_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
click传值vue_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
一篇让你弄明白C语言指针传参和数组传参~
文章目录前言 ⭐️指针传参和数组传参 ⭐️一维数组传参 ⭐️一级指针传参 ⭐️一道经典的指针传参相关题目 ⭐️二维数组传参 ⭐️函数指针!!! ⭐️一个有趣的代码!(*(void( * )())0) ...
python 传参数组_python传参为数组-女性时尚流行美容健康娱乐mv-ida网
女性时尚流行美容健康娱乐mv-ida网 mvida时尚娱乐网首页美容护肤化妆技巧发型服饰健康情感美体美食娱乐明星八卦首页 > 高级搜索 python 替换字符为空 ...
「后端小伙伴来学前端了」Vue-Router 路由各种跳转、传参、小知识
前言学完Vuex方面的操作就该来学学Vue中的路由操作了- xdm冲一.安装 vue-cli 安装 vue add router 做完这一步基础环境都搭好了. 项目中会多一个文件夹,内容如下: ...

react更改路由入参_react路由传参方式

react更改路由入参_react路由传参方式相关推荐

最新文章

热门文章