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

最新推荐文章于 2024-08-16 19:02:09 发布

weixin_30591551

最新推荐文章于 2024-08-16 19:02:09 发布

阅读量268

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhangjixiang123/p/10128074.html

版权

React

1.动态路由传参

接收

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

关注