react router @4 和 vue路由 详解(五)react怎么通过路由传参
2018-12-06 08:34
465 查看
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html
7、react怎么通过路由传参?
a、通配符传参(刷新页面数据不丢失)
//在定义路由的时候 <Route path='/path/:自己起个名字' component={Path}/> //在路由点击跳转的时候 <Link to="/path/你要传的参数">通配符</Link> //另一个页面接收传来的参数 this.props.match.params.你起的名字
举个🌰
另一个页面接收值的时候:
this.props.match.params.id
b、query传参(刷新页面数据丢失)
//路由定义 <Route path='/query' component={Query}/> //跳转的时候 var query = { pathname: '/query', query: '我是通过query传值 ' } <Link to={query}>query</Link> //另一个页面使用的时候 this.props.location.query 这里的this.props.location.query === '我是通过query传值'
c、state传参(刷新页面数据丢失,同query差不多,只是属性不一样,而且state传的参数是加密的,query传的参数是公开的)
//Route定义 <Link to={state}>state</Link> //使用的时候 var state = { pathname: '/state', state: '我是通过state传值' } <Route path='/state' component={State}/> //另一个页面获取值的时候 this.props.location.state 这里的this.props.location.state === '我是通过query传值'
d、路由?传参数
此处的foodmenu通过路由?后面传参数
在另一个页面的this.props.location.search可以获取到 "?id=6"
相关文章推荐
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
- react router @4 和 vue路由 详解(七)react路由守卫
- react路由的使用方法以及通过路由如何传参传递私有属性--【基于最新版本的react-router-dom(4.2.2)】
- Vue中的 this.$router.push() 参数获取 (通过路由传参)
- react router @4 和 vue路由 详解(八)vue路由守卫
- Vue通过URL传参如何控制全局console.log的开关详解
- vue路由的搭建及传参
- 详解vue项目打包后通过百度的BAE发布到网上的流程
- React为 Vue 引入容器组件和展示组件的教程详解
- 通过一个用户管理实例学习路由react-router-dom知识
- 浅谈vue-router 路由传参的方法
- vue-router路由懒加载和权限控制详解
- vue中路由验证和相应拦截的使用详解
- 前端框架学习总结之Angular、React与Vue的比较详解
- vue路由组件传参-页面通信
- 在vue中,路由传参以及获取
- vue-router: 路由传参
- 详解在Vue中通过自定义指令获取dom元素
- vue通过路由实现页面刷新的方法
- Vue.js路由vue-router使用方法详解