this.$router.push方法，父子如何传值和接收值_this.$router.push传的参数怎么接收

query传参

• 点击一个按钮想跳转到另一个路由地址，例如点击查看按钮，想要跳转到B页面，并且想查看本条数据

1. 在 A页面，定义一个方法

 <template slot-scope="scope">
         <el-button @click="handleClickLook(scope.row)" type="text" size="small">查看</el-button>
 </template>
1
2
3

方法实现，传参形式 this.$router.push({path: ’ 路由的name ', query: {key: value}})

    handleClickLook(row){   
      this.$router.push({ 
        path: '/qualitycontrol/qualitychart',
        query:{content:JSON.stringify(row)} 
      })
    },
1
2
3
4
5
6

2. 去B页面来接收传过来的参数，接收形式 this.$route.params.key

this.content=JSON.parse(this.$route.query.content)
1

页面刷新会出现undefined的问题(仅针对query传参)

• 利用this.$router.push进行页面跳转时，如果传递的参数为对象（代码中content为对象）时，不能直接传，而是需要把对象经过JSON.stringify转为字符串，取数据的时候需要用JSON.parse解析出来，刷新的时候才不会出现undefined
• 此外，该方法只对以query形式传参时才会起效果，params不行
• params传参，push里面只能是 name:‘xxxx’,不能是path:’/xxx’, 否则拿到的数据是undefined。因为params只能用name来引入路由

params传参

• 方法实现，传参形式 this.$router.push({name: ’ 路由的name ', params: {key: value}})

this.$router.push({name:'page2',params:{id:1}});
1

• 目标页面接收参数

this.$route.params.id
1

两种传参方式的区别

• 两种方式的区别是query传参的参数会带在url后边展示在地址栏，params传参的参数不会展示到地址栏(/page2?id=1)
• 由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面