vue-router和react-router-dom路由传参对照

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

原文地址：https://www.cnblogs.com/zhangjixiang123/p/10128074.html