vue3 路由传递对象

### Vue3 路由传递对象参数的方法 在 Vue3 中，可以通过多种方式实现路由之间的对象参数传递。以下是具体的方式及其适用场景： #### 使用 `params` 传递对象 当需要隐藏 URL 的参数部分时，可以使用 `params` 来传递数据。这种方式不会将参数显示在地址栏中。 1. **基本路由格式** 需要在路由配置文件中设置接收参数的路径模式。 ```javascript const routes = [ { path: '/target/:id', // 动态路径参数 :id name: 'Target', component: () => import('@/views/TargetView.vue') } ]; ``` 2. **源页面传递参数** 在源页面通过 `$router.push()` 方法传递对象作为参数。 ```javascript this.$router.push({ name: 'Target', // 路由名称 params: { id: JSON.stringify({ key: 'value' }) } // 将对象转换为字符串形式 }); ``` 3. **目标页面获取参数** 在目标组件中解析接收到的对象参数。 ```javascript export default { mounted() { console.log(this.$route.params.id); // 接收参数并解码 try { const obj = JSON.parse(this.$route.params.id); console.log(obj.key); // 输出 value } catch (e) { console.error('无法解析参数'); } } }; ``` 这种方法适用于希望隐藏参数的情况[^3]。 --- #### 使用 `query` 传递对象 如果需要将参数显式展示在 URL 地址栏中，则可以选择 `query` 方式来传递对象。 1. **基本路由格式** 不需要修改路由配置即可支持 `query` 参数。 2. **源页面传递参数** 同样通过 `$router.push()` 方法传递对象参数。 ```javascript this.$router.push({ path: '/target', query: { data: JSON.stringify({ key: 'value' }) } // 将对象序列化到查询字符串 }); ``` 3. **目标页面获取参数** 解析 `query` 数据中的对象。 ```javascript export default { mounted() { const queryStringData = this.$route.query.data; if (queryStringData) { try { const parsedObject = JSON.parse(queryStringData); console.log(parsedObject.key); // 输出 value } catch (error) { console.error('Query 字符串解析失败:', error.message); } } } }; ``` 此方法的优点在于参数会直接反映在浏览器地址栏上，便于调试和分享链接。 --- #### 命名路由传递对象 对于更复杂的项目结构，推荐使用命名路由配合对象参数进行跳转。 1. **路由配置** 定义带有名字的路由规则。 ```javascript const routes = [ { path: '/named-target', name: 'NamedTarget', component: () => import('@/views/TargetView.vue'), }, ]; ``` 2. **源页面调用** 利用命名路由功能完成跳转操作。 ```javascript this.$router.push({ name: 'NamedTarget', params: { objectParam: JSON.stringify({ nestedKey: 'nestedValue' }) }, // 序列化的对象 }); ``` 3. **目标页面处理逻辑** 类似于上述提到的内容，在生命周期钩子函数里读取传入的数据。 ```javascript export default { created() { let receivedObjStr = this.$route.params.objectParam || '{}'; let finalParsedObj; try { finalParsedObj = JSON.parse(receivedObjStr); } catch (err) { console.warn(`未能成功反序列化 ${receivedObjStr}`); finalParsedObj = {}; } console.info(finalParsedObj.nestedKey); // 打印 nestedValue }, }; ``` 上述代码片段展示了如何安全地解析可能为空或者损坏的输入[^4]。 --- ### 注意事项 - 如果涉及敏感信息建议采用 `params` 形式而非暴露在外的 `query`。 - 对象需经过 `JSON.stringify` 和 `JSON.parse` 处理才能正常传输与接受[^1]。