Vue3页面跳转带对象

### 如何在 Vue 3 中通过路由跳转传递对象数据 在 Vue 3 的项目中，可以通过 `vue-router` 来实现页面之间的跳转，并且可以利用查询参数 (`query`) 或路径参数 (`params`) 来传递简单的字符串型数据。然而，如果需要传递复杂的数据结构（如对象），则需采用特定的方法来处理。 #### 使用 Query 参数传递简单数据 对于小型的对象或者不需要保密的信息，可以直接将其序列化为 JSON 字符串并通过 `query` 参数发送给目标页面： ```javascript // 发送方 this.$router.push({ path: '/target', query: { data: JSON.stringify({ key: 'value', anotherKey: 123 }) // 对象转换成JSON字符串 } }); ``` 接收端可以从 `$route.query` 获取这些信息并重新解析回 JavaScript 对象： ```javascript const receivedData = JSON.parse(this.$route.query.data); // 解析JSON字符串恢复原始对象 console.log(receivedData.key); // 输出 "value" ``` 这种方法适合轻量级传输场景[^1]。 #### 利用 Params 进行更隐蔽的数据传送 相比公开暴露于 URL 上的 `query` 方式，`params` 更加隐秘一些因为它不会显示出来。但是需要注意的是 params 只能接受基本类型的值而不是直接支持整个对象。 因此还是建议先将对象转化为字符串形式再赋值给某个 param 键名: ```javascript // 转换与推送过程 let objToPass = { name:"John", age:30 }; this.$router.push({name:'userProfile', params:{userData:JSON.stringify(objToPass)}}); // 接收侧操作 computed:{ userProfile(){ let rawUserData=this.$route.params.userData; return rawUserData ? JSON.parse(rawUserData) : null ; } } ``` 上述例子展示了如何把复杂的用户资料打包进路由配置里去另一页面展示[^2]. #### Vuex 存储状态共享模式 当面临跨多个视图间保持一致性的需求时,Vuex 成为了理想的选择之一.VueX 是官方推荐的状态管理模式,它允许我们在不同组件之间安全有效地同步数据. 首先定义好 store 结构: ```javascript import { createStore } from 'vuex'; export default createStore({ state: { sharedObject: {} }, mutations: { setSharedObject(state, payload){ state.sharedObject=payload; } }, }) ``` 接着，在源页面设置该公共变量之前调用 mutation 更新其内容；而在目的页面，则可通过 computed 属性轻松读取最新版的内容。 ```javascript methods:{ navigateWithObjTransfer(newRoute,obj){ this.$store.commit('setSharedObject',obj); this.$router.push(newRoute); } } // 目标页获取方式 computed:{ transferredObject(){ return this.$store.state.sharedObject; } } ``` #### 处理重复路由错误问题 有时可能会遇到由于相同地址再次触发而引发的异常警告。对此可以在自定义封装一层新的 push 方法解决此状况[^3]: ```javascript const originalPush = Router.prototype.push; Router.prototype.push = function push(location) { return originalPush.call(this, location).catch((err) => { if (err.name !== 'NavigationDuplicated') throw err; }); }; ``` 另外一种解决方案就是监听 $route 的改变事件从而动态响应不同的业务逻辑而不必担心手动控制导航行为带来的麻烦[^4]: ```javascript watch:{ '$route'(to,from){ console.log(`Navigated from ${from.path} to ${to.path}`); }} ``` ### 总结 综上所述，Vue 3 支持多种途径来进行页面间的通信以及数据交换。具体选择取决于实际应用场景的要求比如安全性考量、性能优化等方面因素的影响。