vue基础——页面跳转,路由配置

本文详细介绍了在Vue项目中如何实现路由跳转,并在跳转时携带参数至目标页面的方法。通过实例代码,展示了如何在触发按钮时进行跳转,并在目标页面接收和使用这些参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//当触发一个按钮,发生跳转

applyDetail(index) {

//路由跳转

this.$router.push({

path: "/huaxiainsuranceApplyDetail",//目标地址,vue的跳转需要单独的配置

query: {

//跳转携带的参数信息

    userId: this.insuranceList[index].userId,

    id: this.insuranceList[index].id,

    applyNo: this.insuranceList[index].applyNo,

    status: this.insuranceList[index].status

}

});

},

//配置,路由

 

核心代码:

this.$router.push({

path: "路径地址",//目标地址,

query: {

  id: this.insuranceList[index].id,//参数名:参数

}

});

注意:

1.路径地址,要在你的项目中,事先配置好。要不然识别不了。

2.参数,路径跳转的时候,会将你的参数携带在地址连接上。到下一个页面可以直接使用

  在跳转的页面接收你携带过来的数据——id: this.$route.query.id,

结束~

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值