Vue 进阶（幺叁捌）：vue 路由传参的几种基本方式

关注

发布于: 刚刚

1、动态路由（页面刷新数据不丢失）

methods：{  insurance(id) {       //直接调用$router.push 实现携带参数的跳转        this.$router.push({          path: `/particulars/${id}`,        })}

复制代码

路由配置

{     path: '/particulars/:id',     name: 'particulars',     component: particulars   }

复制代码

接收页面通过 this.$route.params.id 接收

methods：{  insurance(id) {       this.$router.push({          name: 'particulars',          params: {            id: id          }        })  }

复制代码

路由配置

 {     path: '/particulars',     name: 'particulars',     component: particulars   }

复制代码

也是通过 this.$route.params.id 接收参数

通过 query 来传递参数，这种情况下 query 传递的参数会显示在 url 后面?id=？

methods：{  insurance(id) {        this.$router.push({          path: '/particulars',          query: {            id: id          }        })  }

复制代码

路由配置

{     path: '/particulars',     name: 'particulars',     component: particulars   }

复制代码

通过 this.$route.query.id 接收参数

再次梳理下 params 传参和 query 传参的差别：

刚才已经说了，query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

PS:注意接收参数的时候，已经是$route而不是$router！

query更加类似于我们 ajax 中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示。

发布于: 刚刚阅读数: 2

关注

No Silver Bullet 2021.07.09 加入

No Silver Bullet

发布

暂无评论