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
          }
        }
      })
    }
  }
}
相关推荐
dllxhcjla5 分钟前
三大特性+盒子模型
java·前端·css
Cache技术分享12 分钟前
233. Java 集合 - 遍历 Collection 中的元素
前端·后端
嚴寒38 分钟前
Mac 安装 Dart & Flutter 完整开发环境指南
前端·macos
用户66006766853942 分钟前
从变量提升到调用栈:V8 引擎如何 “读懂” JS 代码
前端·javascript
白兰地空瓶42 分钟前
【深度揭秘】JS 那些看似简单方法的底层黑魔法
前端·javascript
进阶的小叮当1 小时前
Vue代码打包成apk?Cordova帮你解决!
android·前端·javascript
天天进步20151 小时前
从零开始构建现代化React应用:最佳实践与性能优化
前端·react.js·性能优化
程序媛_MISS_zhang_01101 小时前
浏览器开发者工具(尤其是 Vue Devtools 扩展)和 Vuex 的的订阅模式冲突
前端·javascript·vue.js
fruge1 小时前
Vue3.4 Effect 作用域 API 与 React Server Components 实战解析
前端·vue.js·react.js
神秘的猪头1 小时前
🌐 CSS 选择器详解:从基础到实战
前端·javascript