vue中this.$router.push()传参简单说明

·  阅读 1431
在项目开发过程中,我发现很多新加入项目组的前端开发,去写this.$router.push()传参时,都存在一个共性问题,代码如下: 

this.$router.push({
    path: 'register',
    name:'register', 
    params: { plan: 'private' }
}) 复制代码
这么写显然是不对的,对于this.$router.push()传参,我在项目一般使用以下两种方式:

1、使用params传参,例:

this.$router.push({ name: 'user', params: { userId: 123 }})复制代码

注意⚠️:patams传参 ,路径不能使用path 只能使用name,借用vue官方文档的一句话,this will not work。

获取参数,例:

this.$route.params.userId复制代码

2、使用query传参,例:

this.$router.push({ path: '/user', query: { userId: 123}})
复制代码

注意⚠️:如果写成:

this.$router.push({ path: '/user', params: { userId: 123 }}) 复制代码

这样依然借用vue官方文档的一句话:this will not work。

获取参数,例:

this.$route.query.userId复制代码


收藏成功!
已添加到「」, 点击更改