vue路由传值params，query之踩坑系列

你的名字 2023-01-15 10:24 220阅读 0赞

## vue路由传值params，query之踩坑系列 ##

vue路由传值

> `this.$router.push({name:xx,params:{id:xx}})`,或者另外一种写法  
> `<router-link :to='{name:"home",params:{id:2}}' tag="li">首页</router-link>`  
> 这两种在某种意义上是一样的效果适合get之外的请求，也就是不在地址栏带参数  
> ![在这里插入图片描述][20210422135145927.png]![在这里插入图片描述][20210422135210103.png]

在这里一定要注意，to前面一定要加冒号`：`，如果是直接跳转,不传参直接这样写就可以了`<router-link to="/home" tag="li">首页</router-link>`,不用加冒号，不然跳过去的就是空白的页面上显示不了，`name`对应的`params`，`path`对应的`query`否则也获取不到值，见下图，把path跟params混用  
![在这里插入图片描述][20210422135451108.png]  
![在这里插入图片描述][20210422135515445.png]

`this.$router.push({path:/xx,query:{id:xx}})`另外一种写法  
`<router-link :to='{path:/xx,query:{id:2}}' tag="li">首页</router-link>`  
这种适合get请求  
![在这里插入图片描述][20210422140049829.png]  
在这里同样不能混用  
获取参数的写法

beforeMount(){ 
        console.log(this.$route.query.id);
        console.log(this.$route.params.id);
      }

## 总结： ##

> `1.`传递参数有两种写法，一种在router-link里面写，一种在js里面写  
> `2.`不论哪种写法都不能把params，name query，path 混着用，不然就会有bug，重中之重

[20210422135145927.png]: https://img-blog.csdnimg.cn/20210422135145927.png
[20210422135210103.png]: /images/20221022/bf1a92b79c5645f3954daf07f2a8052c.png
[20210422135451108.png]: /images/20221022/1ed97afaa3df43348def83bab07815da.png
[20210422135515445.png]: /images/20221022/77123483b63c4664806565ff0e9249f5.png
[20210422140049829.png]: /images/20221022/2ccbf61ae17841289daa6c1243662741.png