Vue获取页面指定路由参数并传递给服务端

业务场景:当用户注册时将路由参数传递给后端

JS:

总结:

1、Vue获取路由参数方法:this.$route.query 。

2、拿到指定路由参数通过el-form组件中的model收集表单后传递给服务端。

3、要判断路由参数为空的情况,为空则传null,此处使用三元表达式处理。

formData.activityId = path.activityId ? path.activityId :  null

4、将undefind转换为null 

formData.utmSource = path.utmSource ?? null

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 项目中,当我们使用 Vue Router 创建了带有路由参数页面,并将项目打包后,如果我们在页面刷新时发现路由参数消失了。这是因为在打包后的项目中,Vue Router 将路由参数创建为前端路由,在刷新页面时,浏览器会向服务器发送请求获取页面,而服务器只返回打包后的静态文件,没有保存路由参数的信息。 为了解决这个问题,我们可以使用一些方法来保存并恢复路由参数。一种常见的方法是使用服务端渲染 (SSR)。通过 SSR,我们可以在服务器端将路由参数一同传递给浏览器,以便在页面刷新时能够恢复参数。但是,SSR 需要特殊的设置和服务器支持,并且会增加项目的复杂性和开发难度。 另一种方法是使用浏览器的本地存储机制,如 localStorage 或 sessionStorage。在页面加载时,我们可以将路由参数存储在本地存储中,然后在页面刷新后,通过读取本地存储中的参数来恢复。这种方法相对简单,但需要我们手动管理本地存储的数据,以确保数据的正确性和安全性。 除了以上两种方法,还可以考虑使用 URL 查询参数来保存路由参数。在页面加载时,我们可以通过读取 URL 查询参数获取路由参数,并在刷新页面时,将参数添加到 URL 中以便浏览器重新获取。这个方法相对简单,但会在 URL 上暴露参数,可能对用户体验和安全性产生影响,需要谨慎使用。 综上所述,当 Vue 项目打包后,在页面刷新时路由参数会消失,我们可以考虑使用 SSR、浏览器本地存储或 URL 查询参数来保存和恢复路由参数。根据项目的需求和实际情况,选择最合适的方法来解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值