美文网首页
向路由组件传递参数的几种方式

向路由组件传递参数的几种方式

作者: 他爱在黑暗中漫游 | 来源:发表于2021-10-19 23:06 被阅读0次
  1. params参数
    路由链接(携带参数):<Link to='/demo/test/tom/18'}>详情</Link>
    注册路由(声明接收):<Route path="/demo/test/:name/:age" component={Test}/>
    接收参数:this.props.match.params

  2. search参数
    路由链接(携带参数):<Link to='/demo/test?name=tom&age=18'}>详情</Link>
    注册路由(无需声明,正常注册即可):<Route path="/demo/test" component={Test}/>
    接收参数:this.props.location.search
    备注:获取到的search是urlencoded编码字符串,需要借助querystring解析

  3. state参数
    路由链接(携带参数):<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
    注册路由(无需声明,正常注册即可):<Route path="/demo/test" component={Test}/>
    接收参数:this.props.location.state
    备注:刷新也可以保留住参数

相关文章

  • 向路由组件传递参数的几种方式

    params参数路由链接(携带参数): 详情 注册路由(声明接收):

    几种vue的组件传值方式

    几种vue的组件传值方式 1、路由传参 ①定义路由时加上参数props: true,在定义路由路径时要留有参数占位...

  • 父子组件的数据传递

    1、父组件通过:count="3"的方式向子组件传递参数,且子组件不能随意修改父组件传递过来的参数,但可以对参数的...

  • 父子组件传值

    1.父组件向子组件传值: 父组件通过属性的方式传递参数,子组件通过props来接收父组件传递过来的参数 2.子组件...

  • 2019-12-05 vue 参数的传递 ---路由名称的获取以

    本文的参数传递,1、是获取路由的名称和app.vue使用路由的时候,向对应名称的路由页面组件内传值。 2、url ...

  • react-router-dom部分笔记

    1,向路由组建传递参数 (1)params 参数 路由链接(携带参数): 注册路由(声明接收) 接收参数this....

  • react组件

    父子组件传值 父→子 父组件通过属性的形式向子组件传递参数子组件通过props接受父组件传递过来的参数注:父组件向...

  • React中向路由组件传递参数

    1. params参数 路由链接(传递参数): 注册路由(声明接收): 接收参数:const {id,title}...

  • 2019-04-10父子组件的交互

    父组件通过属性的方式向子组件传递参数(数据)。 子组件通过发布订阅模式向父组件,子组件发布一个事件,父组件恰好之前...

  • 父子组件

    父组件通过属性的形式向子组件传递参数子组件通过props接受父组件从传递过来的参数

网友评论

      本文标题:向路由组件传递参数的几种方式

      本文链接:https://www.haomeiwen.com/subject/ybezoltx.html