React 跳转页面传参的做法(Link与push)与差别

Posted 2023-03-16

参考技术A

做法2特点：

做法3特点：

1、如果A页面到B页面仅仅传递 普通字符串 ，可以使用做法二和做法三；
2、如果A页面到B页面需要传递 json字符串 ，使用方法三。
3、做法一不建议用。

vue 路由跳转，路由传参的几种方式

1. router-link

<router-link :to="{ path: ‘yourPath‘, params: { name: ‘name‘, dataObj: data }, query: { name: ‘name‘, dataObj: data } }"> </router-link>

 

2. $router方式跳转

this.$router.push({
            path: ‘yourPath‘,            
            query: {
                name: ‘name‘, 
                dataObj: this.msg
           }
        })

this.$router.push(‘yourPath?code=123‘)

以上两种获取方式一样 ，this.$router.query.参数名

this.$router.push({
            name: ‘yourName‘,            
            params: {
                name: ‘name‘, 
                dataObj: this.msg
           }
        })

 获取：this.$router.params.参数名