Vue ， React 路由传参的几种方式

Vue ， React 路由传参的几种方式

Vue路由传参

---

方法一：定义路由时直接携带

{

path:'/detail/:id/:info/:isTrue/:classList',

name:'detail',

component:Detail

}

    获取：this.$route.params

注：参数会被全部转化成字符串，地址栏可见。页面刷新后参数不会消失。

方法二：通过params

this.$router.push({

path:`/describe/${id}`,

})

用params 时，需要在定义路由时需要在path中添加/:id来对应 $router.push 中path携带的参数。

{

path:'/describe/:id',

name:'Describe',

component:Describe

  }

    获取：this.$route.params.id

注：params可以携带任意类型数据，参数在地址栏不可见。刷新后参数消失

方法三：通过query

this.$router.push({

    path:'/describe',

    query:{

        id:id

         }

 })

    获取：this.$route.query.id

注：参数在地址栏显示。在进行页面刷新时，所有参数值会转换成字符串。如果参数携带布尔值，info，func，可能会导致使用错误。

React 路由传参的三种方法

方法一：通过params

1.路由表中

2.link方式 XXXX

3.js方式  this.props.history.push(  '/sort/'+'2'  )

接收页面接收参数

通过  this.props.match.params.id

方法二：通过state （state 传参是加密的）

  1.link方式：

  2.js方式： this.props.history.push({ pathname:'/sort',state:{name : 'sunny' } })

    接收页面参数：

    通过 this.props.location.state.name

方法三：通过query （query传参是公开的）

  link方式：

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

    接收页面参数：

    通过  this.props.location.query.name