uniapp路由传参存在数据类型失真的问题

javascript 复制代码
export default {
  methods: {
    jump() {
      // 通过params传参
      this.$Router.push({name: 'demo', params: {
      	number:1,
        name: '123',
        value: null
      }})
    }
  }
}

目标模块接收参数:

javascript 复制代码
export default {
  onLoad() {
    // 获取参数
    const {number,name, value} = this.$Route.query
    console.log(number,name,value) // '1', '123', 'undefined'
  }
}

这时发现,目标模块接收到的参数都会变成字符串类型,并且null值会变成字符串的undefined;

解决以上问题,可以将传递的参数构造成一个嵌套对象,如用一个data属性来装填我们的参数:

javascript 复制代码
export default {
  methods: {
    jump() {
      // 通过params传参
      this.$Router.push({
        name: 'demo', 
        params: {
          data: {
            number:1,
        	name: '123',
        	value: null
          }
        }
      })
    }
  }
}
相关推荐
ofoxcoding13 小时前
MiniMax M3 实测手记:踩完坑之后,我总结了报错处理和省 token 的几个办法
java·前端·人工智能·ai
阿坨13 小时前
JavaScript异步编程:Promise与async/await
javascript
YG亲测源码屋13 小时前
html表白代码大全可复制免费 html表白网页制作源码
前端·html
夜雪闻竹13 小时前
React Query + REST API 最佳实践
前端·react.js·前端框架
段ヤシ.13 小时前
回顾Java知识点,面试题汇总Day12:tomcat、 Java Web(持续更新)
java·前端·tomcat·java web
JAVA学习通13 小时前
从 Bean 到微服务:一张图吃透 Spring 全家桶底层原理
java·前端·spring
古韵13 小时前
前端请求库的下一个进化方向:从 Promise 到策略化
前端
独特的螺狮粉13 小时前
蛋鸡养护周期管理系统 - 鸿蒙PC Electron框架完整实现指南
前端·javascript·华为·electron·前端框架·开源·鸿蒙
忧郁的蛋~14 小时前
ASP.NET Core Web API 完全指南:请求管道、认证、错误处理到生产部署
前端·后端·asp.net·.net
我穿棉裤了14 小时前
解决el-form表单校验时显示的红色星号与文字对齐的问题
前端·javascript·vue.js