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
          }
        }
      })
    }
  }
}
相关推荐
Junsen5 分钟前
使用 Supabase 实现轻量埋点监控
前端·javascript
Java&Develop7 分钟前
html写一个象棋游戏
javascript·游戏·html
CnLiang14 分钟前
React Compiler Plugin
前端·react.js
willxiao14 分钟前
js 单例模式 6 种实现方式
javascript·设计模式
一只爱吃糖的小羊22 分钟前
React 19 生命周期:从入门到实战的完整指南
前端·react.js
乔伊酱25 分钟前
Bean Searcher 遇“鬼”记:为何我的查询条件偷偷跑进了 HAVING?
java·前端·orm
uu_code00728 分钟前
字节磨皮算法详解
前端
HashTang30 分钟前
【AI 编程实战】第 2 篇:让 AI 成为你的前端架构师 - UniApp + Vue3 项目初始化
前端·vue.js·ai编程
白中白1213838 分钟前
Vue系列-1
前端·javascript·vue.js
dorisrv40 分钟前
Next.js 16 自定义 SVG Icon 组件实现方案 🎨
前端