一、Vue

1、params参数

路由链接(携带参数)：
1、字符串写法

<router-link :to="/home/message/detail/tom/18">跳转</router-link>

2、对象写法

  <router-link 
   :to="{
     name:'xiangqing',
     params:{
      name:tom,
      age:'18'
     }
   }"
  \>跳转</router-link>

注意：不能使用path配置项，必须使用name配置！

​注册路由(声明接收)：

{
    name:'xiangqing',
    path:'detail/:name/:age', //使用占位符声明接收params参数
    component:Detail
}

​接收参数：

this.$route.params

2、query参数

路由链接(携带参数)：
1、字符串写法

<router-link :to="/home/message/detail?name=tom&age=18">跳转</router-link>

2、对象写法

  <router-link 
   :to="{
     path:'/detail',
     query:{
      name:'tom',
      age:18
     }
   }"
  \>跳转</router-link>

​注册路由(无需声明，正常注册即可)：

{
    name:'xiangqing',
    path:'/detail', 
    component:Detail
}

​接收参数：

this.$route.query

二、React

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编码字符串?name="tom"&age=18，需要借助querystring解析

import qs from 'querystring'
const {name,age} = qs.parse(search.slice(1))

3、state参数

​ 路由链接(携带参数)：

<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>

​注册路由(无需声明，正常注册即可)：

<Route path="/demo/test" component={Test}/>

​接收参数：

this.props.location.state

备注：刷新也可以保留住参数