Vue进阶(幺叁捌):vue路由传参的几种基本方式

举报
SHQ5785 发表于 2020/12/29 23:02:46 2020/12/29
【摘要】 1、动态路由(页面刷新数据不丢失) methods:{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`, }) } 1234567 路由配置 { path: '/particulars/:id', name: 'particu...

1、动态路由(页面刷新数据不丢失)

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

路由配置

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

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

2、路由 name 匹配,通过params传参

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

路由配置

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

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

3、路由path路径匹配,

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

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

路由配置

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

  1. 用法上

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

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

  1. 展示上

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

拓展阅读

文章来源: shq5785.blog.csdn.net,作者:No Silver Bullet,版权归原作者所有,如需转载,请联系作者。

原文链接:shq5785.blog.csdn.net/article/details/109116439

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200