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
          }
        }
      })
    }
  }
}
相关推荐
晴天167 分钟前
Tsup:TypeScript库打包的“零配置极速方案”
前端·javascript·typescript
计算机魔术师14 分钟前
OpenAI 回应智能体接管德语维基网站事件,称将改革 AI 误对齐事件披露机制
前端
晴天1625 分钟前
PWA 让网页拥有原生应用的体验
前端·pwa
雪芽蓝域zzs26 分钟前
第十七节:面包屑导航组件(适配多级嵌套路由)
前端·javascript·vue.js
smileNicky1 小时前
React 弹窗组件如何在新标签页打开?
javascript·react.js·ecmascript
Csvn1 小时前
类型驱动开发(Type-Driven Development):让类型约束先行为导向
前端
计算机魔术师1 小时前
AI 代理把德国维基当留言板,OpenAI 闷声几周才承认
前端
yume_sibai1 小时前
Element Plus 其他实用组件完全指南(10个核心组件)
前端·javascript·vue.js
雪芽蓝域zzs1 小时前
第二十二节:进阶:用户管理新增、编辑弹窗 + 表单校验
前端·javascript·vue.js
IT_陈寒1 小时前
Java字符串判等踩坑记:==和equals真的不能乱用
前端·人工智能·后端