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
          }
        }
      })
    }
  }
}
相关推荐
小杨升级打怪中6 分钟前
前端面经-webpack篇--定义、配置、构建流程、 Loader、Tree Shaking、懒加载与预加载、代码分割、 Plugin 机制
前端·webpack·node.js
Yvonne爱编码19 分钟前
CSS- 4.4 固定定位(fixed)& 咖啡售卖官网实例
前端·css·html·状态模式·hbuilder
SuperherRo1 小时前
Web开发-JavaEE应用&SpringBoot栈&SnakeYaml反序列化链&JAR&WAR&构建打包
前端·java-ee·jar·反序列化·war·snakeyaml
大帅不是我1 小时前
Python多进程编程执行任务
java·前端·python
前端怎么个事1 小时前
框架的源码理解——V3中的ref和reactive
前端·javascript·vue.js
Ciito1 小时前
将 Element UI 表格元素导出为 Excel 文件(处理了多级表头和固定列导出的问题)
前端·vue.js·elementui·excel
不爱吃饭爱吃菜2 小时前
uniapp微信小程序一键授权登录
前端·javascript·vue.js·微信小程序·uni-app
heart000_12 小时前
从零开始打造个人主页:HTML/CSS/JS实战教程
javascript·css·html
明耀2 小时前
WPF C# 用WebView加载H5页面(uniapp项目,vue项目)
uni-app·c#·wpf
90后小陈老师3 小时前
3D个人简历网站 5.天空、鸟、飞机
前端·javascript·3d