文档备案控制台

开发者社区开发与运维文章正文

vue query传参刷新后数据变成[Object Object]

2023-10-30 379

版权

版权声明：

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue query传参刷新后数据变成[Object Object]

推荐一个不错的学习资料库

vue query传参刷新后数据变成[Object Object]

原因是传参的时候不能传对象，我们可以先转为json字符串，用的时候再转回去就可以了。

错误写法

this.$router.push({
  path: '/index',
    query: object
 })

修复

this.$router.push({
  path: '/index',
    query: {
     obj: JSON.stringify(obj)   // 转成json字符串传参
  }
 })

使用

JSON.parse(this.$route.query.obj)  // 使用时将json字符串再转回来

文章标签：

JavaScript

数据格式

JSON

关键词：

vue object

数据object

VUE.js数据

VUE.js object

VUE.js传参

Mr.Meng_95

目录

相关文章

34789737

|

5月前

|

JavaScript 安全

vue3使用ts传参教程

Vue 3结合TypeScript实现组件传参，提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性，建议明确声明类型，保障代码质量。

34789737

529 0 0

蓝易云

|

8月前

|

JavaScript 前端开发开发者

讲述Vue框架中用于对象响应式变化的Object.defineProperty函数。

综上所述，Vue.js通过 `Object.defineProperty()`提供了强大的响应式能力，使得状态管理变得简洁高效。这种能力是Vue.js受到广大开发者青睐的重要原因之一。尽管Vue 3.x使用Proxy替代了该方法，但对于Vue 2.x及其之前版本，`Object.defineProperty()`是理解Vue.js内部工作机制不可或缺的一部分。

蓝易云

269 27 27

光明顶阳顶天

|

缓存 JavaScript UED

Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？

在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。

光明顶阳顶天

661 161 161

CamilleKing

|

JavaScript 数据管理 Java

在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？

【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。

CamilleKing

677 156 156

CamilleKing

|

JavaScript 开发者

在 Vue 3 中使用 Proxy 实现数据的双向绑定

【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。

CamilleKing

707 157 157

小宋1021

|

SQL JavaScript 前端开发

Vue实现动态数据透视表（交叉表）

Vue实现动态数据透视表（交叉表）

小宋1021

519 13 13

游客lijmi4663rgsa

|

前端开发数据处理

对象数据的读取，看这一篇就够了！Object.keys()、Object.values()和Object.entries()用法详解；如何获取对象原型链上的属性

Object.keys()、Object.values()和Object.entries()都是利于对象操作的便捷方法，能有效提升数据处理的效率。博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

游客lijmi4663rgsa

1574 0 0

游客lijmi4663rgsa

|

JavaScript 前端开发 API

管理数据必备；侦听器watch用法详解，vue2与vue3中watch的变化与差异

一篇文章同时搞定Vue2和Vue3的侦听器，是不是很棒？不要忘了Vue3中多了一个可选项watchEffect噢。博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

游客lijmi4663rgsa

741 0 0

游客lijmi4663rgsa

|

存储数据采集供应链

属性描述符初探——Vue实现数据劫持的基础

属性描述符还有很多内容可以挖掘，比如defineProperty与Proxy的区别，比如vue2与vue3实现数据劫持的方式有什么不同，实现效果有哪些差异等，这篇博文只是入门，以后有时间再深挖。博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

游客lijmi4663rgsa

234 0 0

html的七十二变

|

监控 JavaScript 算法

深度剖析 Vue.js 响应式原理：从数据劫持到视图更新的全流程详解

本文深入解析Vue.js的响应式机制，从数据劫持到视图更新的全过程，详细讲解了其实现原理和运作流程。

html的七十二变

713 3 3

热门文章

最新文章

Vue3-TypeScript-事件-计算属性用法

如何在Vue3项目中集成ESLint+Prettier+Stylelint+Husky?

Vue3中状态管理pinia学习（六）

vue-router 实现路由懒加载（动态加载路由）

Vue3组件（14）控件属性的设置方式

Vue中如何进行文件浏览与文件管理

Vue2+Vue3基础入门到实战项目（一）—— 课程学习笔记

Vue高级与前端项目架构 2

Vue报错：Error in v-on handler: “ReferenceError: regeneratorRuntime is not defined“

基于Vue项目整合Element UI 做登录和注册表单，如果你看不懂就是我的问题。

Project Object Model

简介Object类+接口实例（深浅拷贝、对象数组排序）

滚雪球学Java(42)：探索对象的奥秘：解析Java中的Object类

开发语言漫谈-Object C

JavaScript与Object C的区别

object c架构，swfit，SwiftUI的关系与架构选择

Vue : Object.defineProperty()

【JAVA学习之路 | 基础篇】Object类及重写的equals()与toString()

【设计模式】JAVA Design Patterns——Active Object（活动对象设计模式）

Java Object 类

相关课程

更多

Spring Boot+Vue.js+FastDFS实现分布式图片服务器

Vue.js 入门与实战

Vue.js完全自学手册图文教程

相关电子书

更多

Vue.js 在前端服务化上的探索与实践

利用编译将 Vue 组件转成 React 组件

Vue.js在前端服务化上的实践与探索

下一篇

狂揽7.5k星！这款开源API网关彻底解放开发者：一键聚合GPT-4、Suno、Midjourney，还能在线充值！