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

Posted 2021-01-27 zhangjixiang123

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