vue-router 路由怎么传递一个或多个参数?

声明式导航用在直接渲染到页面
编程式导航用于在js中处理逻辑后需要页面进行跳转

vue-router中传递参数主要分两大类:

  1. 编程式的导航 router.push
  2. 声明式的导航 < router-link >

本文主要演示一下编程式导航 router.push 传递参数的实现。
第一种是 命名路由,也成路由参数,第二种是查询参数

  1. 先演示使用 params 只传递一个参数的写法
    只传递一个参数,直接在path中添加 /:id (取名根据实际需要)来对应 $router.push 中path携带的参数
//点击跳转的方法
 goPwdList(index, row) {
      this.$router.push({
//直接调用$router.push 实现携带参数的跳转
      path: `/index/passwordlist/${row.houseNo}`
 });
 
//路由  路由跳转路径需要配置参数
 {
     path: 'passwordlist/:houseId',
     component: PasswordList
  },
 
//在目标页面获取父组件通过路由传递过来的参数
var house_id = this.$route.params.houseId;
  1. params 传递多个参数
    直接在路由路径上拼接多个参数
    在这里插入图片描述
    对应组件使用路由的方法如下:
    在这里插入图片描述
    对应目标组件,获取路由上传过来的参数:
    注意:是this.route 而不是 this.router
    在这里插入图片描述

查询参数(query)

使用查询参数的方式,在路由配置中,path就不用再拼接参数
在这里插入图片描述
在父组件中,直接将需要传递的参数放在query里,如下
在这里插入图片描述
在子组件中使用this.route.query 接收参数
在这里插入图片描述

ps:使用params传递参数,url上只会出现数据,不会出现具体字段
在这里插入图片描述
而使用查询参数query的方式,url上会出现具体的字段,比较不安全
在这里插入图片描述

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值