javascript - Vue-router4 - 传递对象不会传递动态数据
问题描述
我浏览了这个有点相关的vue-router@4.05 对象参数。在该线程中提到了这个https://github.com/vuejs/vue-router-next/issues/494,但我仍然很困惑。
我还尝试使用路由器链接组件的:to属性传递一些数据。我做了两支笔来展示这个问题:
笔 1成功传递了在路线定义中定义的对象。
Pen 2试图传递一个动态对象,而不是实际对象,它得到一个带有 [Object object] 的字符串,如 github 问题中所述。
控制台输出:
[Vue 警告]:无效的道具:道具“存储库”的类型检查失败。预期的对象,得到具有>值“[对象对象]”的字符串。at <Repository repository="[object Object]" onVnodeUnmounted=fn ref=Ref > at at at at
所以,如果我明白这一点,最终你不能传递一个动态对象,因为它被解析了,但你可以传递一个静态对象?
我已经尝试过 props: true 和一切,我正在尝试功能模式解决方案作为更复杂的示例
片段:
<router-link :to="{ name: 'Home' }">Home</router-link>
<router-view />
<router-link
:to="{
name: 'Repository',
params: { repository: { one: '1', two: '2' } },
}">click me</router-link>
v1
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/repo/",
name: "Repository",
component: () => import("../components/Repository.vue"),
props: (route) => {
console.log("entered route");
console.log(route);
return { ...route.params, repository: { one: "1", two: "2" } };
}
}];
v2
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/repo/",
name: "Repository",
component: () => import("../components/Repository.vue"),
props: (route) => {
console.log("entered route");
console.log(route);
return { ...route.params };
}
}];
解决方案
您的代码中发生了什么:
正如您在控制台中的警告消息中看到的那样,您实际上是String
从道具而不是Object
:
[Vue 警告]:无效的道具:道具“存储库”的类型检查失败。预期对象,得到字符串
许多人建议使用Vuex并设置全局状态作为解决方案,我相信这不是您想要的。
解决方案
为了避免获取[Object, Object]
作为传递的数据,您可以做的是将原始页面中的对象字符串化,然后在目标页面上再次将传递的字符串解析为对象。
原始页面/路由器组件
<router-link
:to="{
name: 'Your_Route_Name',
params: { repository: JSON.stringify({ one: '1', two: '2' }) },
}">click me</router-link>
在您的目标路由器组件中
<template>
<div>
{{ JSON.parse(repository) }}
</div>
</template>
<script>
export default {
props: ["repository"],
setup(props) {
//Log the parsed object in console. Example shown with Vue3 Composition API but you get the idea.
console.log(JSON.parse(props.customer));
}
}
</script>
这样,您将能够按意图传递 Object。
推荐阅读
- angular - removeAllListeners() 根本不删除监听器?(Socket.IO)
- ms-access - MS Access Report:如何在页脚中重复组的最后一条记录
- php - 我应该使用哪个函数代替 codeignitor 中的 redirect()?
- ibm-cloud-infrastructure - 结果对于 Softlayer API 响应来说太大了
- r - 选择显示另一列中至少一个值的唯一条目
- c# - While循环使我的程序在运行时没有响应
- vba - 使用 COM 互操作从 VBA 调用 C# 方法
- excel - VBA 无法打开存在的工作簿
- python - 错误:使用数据库作为 SQLITE 插入命令错误
- machine-learning - 如何使用 Keras 过度拟合数据?