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
          }
        }
      })
    }
  }
}
相关推荐
qq_589666056 小时前
TypeScript 完整入门教程
前端·javascript·typescript
2501_915918416 小时前
深入对比iOS开发中常用性能监控工具的底层原理与优缺点分析
android·ios·小程序·https·uni-app·iphone·webview
星栈独行7 小时前
翻完 Pi 源码:它和 Codex、Claude Code 有何不同
开发语言·javascript·人工智能·程序人生
落落Plus8 小时前
浏览器缓存机制详解
javascript·缓存·浏览器缓存
用户059540174469 小时前
LLM对话记忆测试踩坑实录:手工回归30分钟,自动化后2分钟发现3个隐藏Bug
前端·css
Ashley的成长之路10 小时前
前端性能优化实战手册·第2篇:资源加载策略全解
前端·性能优化·资源加载·http/3·性能优化实战·资源加载优化
浅水壁虎10 小时前
vue基础(第二章 )
前端·javascript·vue.js
界面开发小八哥10 小时前
界面控件DevExtreme v26.1新版亮点——支持Angular 22
前端·javascript·angular.js·devexpress·ui开发·devextreme
Getflare10 小时前
前端 + UI 设计 + AI:这不是三个工种,是一个新三角能力模型(附自检清单)
前端·人工智能·ui