React
1.动态路由传参
<Route exact path="/detail/:id" component={Detail}/>
接收
componentDidMount() {
console.log(
this.props.match.params);
}
2.函数传参(push)加密的地址栏不可见
<button onClick={() =>
this.props.history.push({ pathname: '/detail', state: { id: 3 } })}>通过函数跳转</button>
接收
componentDidMount() {
//console.log(this.props.match.params);
console.log(
this.props.history.location.state);
}
不加密(query传参)
this.props.router.push({ path : '/sort' ,query : { name: ' sunny'} })
接收
this.props.location.query.name
以上方法都可以在 <Link to={{path=:'/sort',query:{name:'xx'}}}> 传递
Vue
1.动态路由
先在路由那配置
{ path: '/describe/:id', name: 'Describe', component: Describe }
然后在组件中通过
this.$router.push({ path: `/describe/${id}`, })
或者 <router-link link="/describe/2" />
接收
this.$route.params.id
2.通过 name和params配合
先在路由配置
{
path: '/describe',
name: 'Describe',
component: Describe
}
然后在组件中通过
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
接收
this.$route.params.id
3.通过path和query配合使用
先在路由配置
{
path: '/describe',
name: 'Describe',
component: Describe
}
然后在组件中通过
this.$router.push({
path: '/describe',
query: {
id: id
}
})
接收
this.$route.query.id