Vue与React路由组件传参

一、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:'/home/message/detail',
     query:{
      name:'tom',
      age:18
     }
   }"
  \>跳转</router-link>

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

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

​接收参数：

this.$route.query

3、路由的props配置

（1）值为对象，该对象中的所有key-value都会以props的形式传给Detail组件

{
	name:'xiangqing',
	path:'detail', 
	component:Detail，
	props:{name:'tom',age:18}
}

（2）值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件

{
	name:'xiangqing',
	path:'detail/:name/:age', 
	component:Detail，
	props:true
}

（3）值为回调函数，函数可以接收到$route参数

{
	name:'xiangqing',
	path:'detail', 
	component:Detail，
	props($route){
		return {
			name:$route.query.name,
			age:$route.query.age
		}
	}
}

​接收参数：

props:['name','age']

二、React

1、react-router-dom@5

（1）params参数

路由链接(携带参数)：

<Link to='/demo/test/tom/18'}>详情</Link>

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

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

​接收参数：

const {name,age} = 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 {search} = this.props.location
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}/>

​接收参数：

const {name,age} = this.props.location.state || {}

注意：地址栏中没有体现出携带的参数，刷新页面后还可以保留住参数

原因：使用的是BrowserRouter，它在操作浏览器中的history，由于location是history的一个属性，所以传递的参数都在history中维护着，如果把浏览器的缓存清空，那么对应的值也会被清空。

2、react-router-dom@6

函数式组件

（1）params参数

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

<Link to='/test?name=tom&age=18'}>详情</Link>

路由表中注册路由：

{
	path:'/test/:name/:age',
	element:<Test/>
}

​接收参数：

import {useParams} from 'react-router-dom'
export default function Test() {
	const {name,age} = useParams()
	return (
		<div>
			{name,age}
		</div>
	)
}

（2）search参数

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

<Link to='/test?name=tom&age=18'}>详情</Link>

路由表中注册路由：

{
	path:'/test',
	element:<Test/>
}

​接收参数：

import {useSearchParams} from 'react-router-dom'
export default function Test() {
	const [search,setSearch] = useSearchParams()
	const name = search.get('name')
	const age= search.get('age')
	return (
		<div>
			{name,age}
		</div>
	)
}

setSearch用于更新接收到的search参数

<button onClick={() => setSearch('name=jack&age=20')}>更新</button>

（3）state参数

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

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

路由表中注册路由：

{
	path:'/test',
	element:<Test/>
}

​接收参数：

import {useLocation} from 'react-router-dom'
export default function Test() {
	const {state:{name,age}} = useLocation()
	return (
		<div>
			{name,age}
		</div>
	)
}