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

关注

发布于: 刚刚

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

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传参的差别：

1. 用法上

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

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

2. 展示上

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

发布于: 刚刚阅读数: 2

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论